سلايدر متناسق لعرض الصور

سلايدر متناسق لعرض الصور

يوجد الآن مشاهدة التعليقات : 16

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

سلايدر شو يعرض صورا بأناقة وبجودة عالية ما يميزه أنه يتناسب تلقائيا مع أي حجم والمكان الأفضل له هو بالسيدبار ويمكن استعماله بداخل المواضيع أيضا يصلح لكافة المجالات وبسهولة يمكنك نسخ صورة موضوعك ووضعها به مع رابط الموضوع لن تحتاج لتعديل مقاسها وبهذا وبدون تأخير سأدعكم مع المعاينة
شرح طريقة التركيب
1. إبحث عن </body> وضع الكود التالي فوقه
<script src='//googledrive.com/host/0B0LkZloPKBfWRXVIS0x6RFlQQjg'/>
<script type='text/javascript'>
    jQuery( document ).ready(function( $ ) {
        $( &#39;#my-slider&#39; ).sliderPro();
    });
</script>
2. بعدها إبحث عن </head> وضع الكود التالي فوقه
<link href='//googledrive.com/host/0B0LkZloPKBfWNHQ2TDVGYkpZRFU' rel='stylesheet'/>
3. إذهب إلى التخطيط وأضف أداة Html/Javascript بالمكان الذي يناسبك وضع بها الكود الآتي
<div class="slider-pro" id="my-slider">
    <div class="sp-slides">
        <!-- Slide 1 -->
        <div class="sp-slide">
            <a href="#" target="_blank"><img class="sp-image" src="http://3.bp.blogspot.com/-7VgyBrRkJ3E/VfgUc-QjMMI/AAAAAAAAI38/GIgR1JewiJY/s1600/Pro1.png"/></a>
                       
        </div>

  <!-- Slide 2 -->
        <div class="sp-slide">
 <a href="#" target="_blank"> <img class="sp-image" src="http://3.bp.blogspot.com/-h0KxM6-112I/Vd4qB8DabXI/AAAAAAAALJw/qjE4HfTk_BU/s1600/Tag%2Band%2BStyling%2BVienna%2BLite%2B2.jpg"/></a>
                      
            
        </div>

        <!-- Slide 3 -->
        <div class="sp-slide">
 <a href="#" target="_blank"> <img class="sp-image" src="http://4.bp.blogspot.com/-FJm4YwkDRmk/U82_7bos97I/AAAAAAAAEoQ/qXsRwHK9oiA/s1600/2014_rio_2_movie-1280x800.jpg"/></a>
           
            
        </div>

<!-- Slide 4 -->
        <div class="sp-slide">
 <a href="#" target="_blank"> <img class="sp-image" src="http://2.bp.blogspot.com/-LIVivboMUw4/VebWlcwjWkI/AAAAAAAAIo4/jVLxjPxhehw/s1600/nickwordc.jpg"/></a>
           
            
        </div>

<!-- Slide 5 -->
        <div class="sp-slide">
 <a href="#" target="_blank"> <img class="sp-image" src="http://1.bp.blogspot.com/-T-2rWKFugBk/VL0Abkjb7rI/AAAAAAAAHFA/5sLSInli3WI/s1600/work_03.png"/></a>
            
            
        </div>

<!-- Slide 6 -->
        <div class="sp-slide">
 <a href="#" target="_blank"> <img class="sp-image" src="http://1.bp.blogspot.com/-9TnEjf3WVUI/VR2wajmlDRI/AAAAAAAAHbQ/S_GCiA7-R8Y/s1600/6.jpg"/></a>
            
            
        </div>
    </div>
</div>
التخصيص
* كل الصور محددة باللون الأخضر تغير بخاصتك
* الهاشتاج # ضع بدله رابط الموضوع
* يمكنك إضافة صورة سابعة عبر إضافة الكود التالي أسفل </div> المحدد بالبرتقالي
<!-- Slide 7 -->
        <div class="sp-slide">
 <a href="رابط الموضوع" target="_blank"> <img class="sp-image" src="رابط الصورة"/></a>
            
            
        </div>
وهكذا يمكنك إضافة صورة 8 و 9... عبر تكرار الكود بعد </div> الكود السابق
ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 16 تعليقًا:

  1. مفيش حل ادخليه فى نص الموضوع ؟

    ردحذف
  2. الله عليك سلايدر ما شفت زيه الله عليك شكرااااااا وألف شكرااا

    ردحذف
    الردود
    1. نورت بتعليقك المشبع بالحيوية أخي أحييك جدا

      حذف
  3. ممكن ان اعملها في الموضوع يعني داخل الموضوع لصور ؟؟

    ردحذف
    الردود
    1. نعم يمكنك ضع الكود 3 داخل الموضوع بتبويب HTML

      حذف
  4. شكراأأأأأ يا رائع دائماً مبدع ليس غريب عليك ^_^ استمر

    ردحذف
  5. شكرآآا لك حبيبي
    ممكن كيف ازيد سرعة التغير الصور

    ردحذف
  6. أهلًا حسام الحبوب، باركك الله ع السلايدر المتناسق
    والشرح الجميل، لدي استفسار وحسب، ألا يمكن تغيير
    أبعاد السلايدر؟ أحب أخليها شوية عريضة وأكثر طولًا :/

    ردحذف
  7. أهلا بك أخي... السلايدر يتغير حجمه على حسب المكان، لكن التعديل على مقاسه سيخرب المظهر قد جربت فعلا

    ردحذف
  8. الاضافةجميلة لكن فيها مشكل أن الصور تتغير بشكل عشوائي لو ممكن تقولي كيف أجعلها تتغير بشكل منتظم يعني كل 3 ثواني مثلا تتغير الصور ... شكرا

    ردحذف
    الردود
    1. وذلك هو المراد اخي في هذا السلايدر... سيكون هناك سلايدر يتغير يدويا وتلقائيا فلتبقى على اطلاع

      حذف
  9. اخي السيدر شو لا يعمل لماذا

    ردحذف
  10. اخي اريد عرض اكثر من واحد في الصفحة الرئيسية ساعدني؟؟

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم