القائمة الرئيسية

الصفحات

جديد
جاري التحميل...
تعديل المشاركة

سكريبت سليدر شو(slide show) بسيط متوافق مع جميع الاجهزة

AMP plus
(0)

 في هذا المقال سنعرض لكم سكريبت سلايد شو بسيط وسهل الإستخدام مع إضافات اخرى مرفقة معه متوافقة مع جميع الاجهزة و به خاصية التمرير باليد عكس باقي السكريبتات التي لاتدعمها للأسف.

بنسبة لمعاينة السكريبت ستجده في اسفل المقالة.

1-تأكد من وجود مكتبة jQuery في قالبك:

قم بالبحث في في وضع HTML عن طريق الضغط على يمين الفئرة بداخل صندوق HTML ثم  Ctr+f ثم إبحث عن jquery. إن لم تجده فقط قم بوضع هذا الكود اسفل <head>.

<script src='https://code.jquery.com/jquery-3.5.1.min.js'/>

2-تركيب السكريبت:

اولا سنقوم بتركيب جافا سكريبت الخاص به: 

قم بوضع الكود اسفله بعد </body> موجود في نهاية كود القالب.


<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js" type="text/javascript"></script>
<script type="text/javascript">
   //<![CDATA[ 
    $(document).ready(function(){
      $('.slider-article').slick({
        rtl: true,
        dots: true,
        prevArrow : '<button type="button" class="slick-prev">‹</button>',
        nextArrow : '<button type="button" class="slick-next">›</button>',
      });
    });
   //]]> 
</script>

تانيا تركيب التنسيق الخاص به: 

نضعه قبل التنسيق الموجود في القالب او بعد </head>.


<link href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet" type="text/css"></link>
<style>
.slider-article {width: 100%;margin: auto;max-width: 900px}
.photo-article {width: 100% !important;max-height: 250px;}
.meta-article {position: absolute;bottom: 5px;display: flex;width: calc(100%/7);}
.title-article {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;border-radius: 50px 0 0 50px;margin-left: auto;height: 30px;padding: 0 10px 0 15px;background-color: #fefefe;color: #161617;box-shadow: 0 2px 10px 0 rgb(0 0 0 / 7%);-webkit-transition: all .1s ease;transition: all .1s ease;}
.category-article {white-space: nowrap;text-overflow: ellipsis;border-radius: 0px 50px 50px 0px;height: 30px;padding: 0 10px 0 15px;background-color: #fefefe;box-shadow: 0 2px 10px 0 rgb(0 0 0 / 7%);-webkit-transition: all .1s ease;transition: all .1s ease;}
.slick-list {width: calc(100% - 50px);margin: auto!important;}
.slick-prev, .slick-next {font-size: 30px;font-weight: 600;position: absolute;top: 50%;display: block;width: 23px;height: 23px;padding: 0px 0px 7px 0px;
    -webkit-transform: translate(0, -50%);-ms-transform: translate(0, -50%);transform: translate(0, -50%);cursor: pointer;border: none;outline: none;border-radius: 50%;box-shadow: 0px 0px 7px;line-height: 0;}
.slick-arrow:hover {background-color: gold;}
.slick-prev {right: -11px;}
.slick-next {left: -11px;}
/* Dots */
.slick-dotted.slick-slider{margin-bottom: 30px;}
.slick-dots{position: absolute;bottom: -25px;display: block;width: 100%;padding: 0;margin: 0;list-style: none;text-align: center;}
.slick-dots li{position: relative;
display: inline-block;
width: 20px;height: 20px;margin: 0 5px;padding: 0;cursor: pointer;}
.slick-dots li button{font-size: 0;line-height: 0;display: block;width: 10px;height: 10px;padding: 5px;cursor: pointer;color: transparent;border: 0;outline: none;border-radius: 50%;box-shadow: 0px 0px 5px;}
.slick-dots li button:hover,.slick-dots li button:focus{outline: none;}
.slick-dots li.slick-active button{opacity: .85;color: black;}
.slick-dots button:hover{background-color: gold;}
@media only screen and (max-width: 600px) {
  .slick-list {width: 100%;}
  .slick-next {left: 5px;}
  .slick-prev {right: 5px;}
  .slick-prev, .slick-next {z-index: 9;}
  .title-article, .category-article {padding: 0 5px 0 5px;}
  .meta-article {flex-direction: column-reverse;}
  .title-article {max-width: calc(100% - 10px);}
  .category-article {margin-left: auto;border-radius: 50px 0px 0px 50px;}
}
</style>

ثالثا تركيب كود html لعرض سلايدر : 

ربما سيكون صعبا لمن لايعلم لغة html حسنا في الفيديو اسفله ربما ساعطيك تلميحا ,لاتنسى إلقاء نضرة في الصورة اسفله للدخول بمحرر المواقع في المتصفحات.


<b:if cond='data:view.isMultipleItems'>              
<div class='slider-article'>
  <div class='article'>
     <a href='https://libraryscripts.blogspot.com/2021/04/blog-post.html'>
      <img class='photo-article' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPPdDEMJTI3tLttpjtk9xyuPkyy5COCyAyISAkUDfwm57dtDMmXUOE_5bhavxTDeRmEjpL7IA2sQaavDKB2od-Z9ZxYgZWbV3DRsX3VuX_VYHOL2T8uruaZAI9Y6swdedFGxcHb2yuP7A/w400-h206/Screenshot_12.png'/>
      <div class='meta-article'>
      <div class='title-article'><a href='https://libraryscripts.blogspot.com/2021/04/blog-post.html'>سكريبت(كود) شريط الأخبار متحرك جاهزلمدونتك بلوجر</a></div>
      <span class='category-article'>
       <a href='https://libraryscripts.blogspot.com/search/label/%D8%B3%D9%83%D8%B1%D9%8A%D8%A8%D8%AA%D8%A7%D8%AA'>
      <svg aria-hidden='true' class='icon small-icon' data-icon='tags' data-prefix='fal' focusable='false' role='img' viewBox='0 0 640 512' xmlns='http://www.w3.org/2000/svg'><path d='M625.941 293.823L421.823 497.941c-18.746 18.746-49.138 18.745-67.882 0l-1.775-1.775 22.627-22.627 1.775 1.775c6.253 6.253 16.384 6.243 22.627 0l204.118-204.118c6.238-6.239 6.238-16.389 0-22.627L391.431 36.686A15.895 15.895 0 0 0 380.117 32h-19.549l-32-32h51.549a48 48 0 0 1 33.941 14.059L625.94 225.941c18.746 18.745 18.746 49.137.001 67.882zM252.118 32H48c-8.822 0-16 7.178-16 16v204.118c0 4.274 1.664 8.292 4.686 11.314l211.882 211.882c6.253 6.253 16.384 6.243 22.627 0l204.118-204.118c6.238-6.239 6.238-16.389 0-22.627L263.431 36.686A15.895 15.895 0 0 0 252.118 32m0-32a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.746 18.746-49.138 18.745-67.882 0L14.059 286.059A48 48 0 0 1 0 252.118V48C0 21.49 21.49 0 48 0h204.118zM144 124c-11.028 0-20 8.972-20 20s8.972 20 20 20 20-8.972 20-20-8.972-20-20-20m0-28c26.51 0 48 21.49 48 48s-21.49 48-48 48-48-21.49-48-48 21.49-48 48-48z' fill='currentColor'/></svg>سكريبتات</a>
      </span>
      </div>
     </a>
    </div>
  <div class='article'>
     <a href='https://libraryscripts.blogspot.com/2021/04/webp.html'> 
      <img class='photo-article' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVl-CGHqhmys3fFR3fWz_4hNQ9o-QUjSy6_TPNJv_C6iHyOYTQ1GJ9ihXBNau0uuFc2hqPnSNEN4Ws1Fz2mXIWB8ND57pt6tN0dBhWyrVY2Fpqrn0zAvhVQ5U2r5ziKZBsP1zUsRNooeA/w400-h226/1_33LlifxUZR38Y7TohLialA.png'/>
      <div class='meta-article'>
      <div class='title-article'><a href='https://libraryscripts.blogspot.com/2021/04/webp.html'>سكريبت تحويل صور مدونتك إلى webp بلوجر مع التخزين المؤقت</a></div>
      <span class='category-article'>
      <a href='https://libraryscripts.blogspot.com/search/label/%D8%B3%D9%83%D8%B1%D9%8A%D8%A8%D8%AA%D8%A7%D8%AA'>
      <svg aria-hidden='true' class='icon small-icon' data-icon='tags' data-prefix='fal' focusable='false' role='img' viewBox='0 0 640 512' xmlns='http://www.w3.org/2000/svg'><path d='M625.941 293.823L421.823 497.941c-18.746 18.746-49.138 18.745-67.882 0l-1.775-1.775 22.627-22.627 1.775 1.775c6.253 6.253 16.384 6.243 22.627 0l204.118-204.118c6.238-6.239 6.238-16.389 0-22.627L391.431 36.686A15.895 15.895 0 0 0 380.117 32h-19.549l-32-32h51.549a48 48 0 0 1 33.941 14.059L625.94 225.941c18.746 18.745 18.746 49.137.001 67.882zM252.118 32H48c-8.822 0-16 7.178-16 16v204.118c0 4.274 1.664 8.292 4.686 11.314l211.882 211.882c6.253 6.253 16.384 6.243 22.627 0l204.118-204.118c6.238-6.239 6.238-16.389 0-22.627L263.431 36.686A15.895 15.895 0 0 0 252.118 32m0-32a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.746 18.746-49.138 18.745-67.882 0L14.059 286.059A48 48 0 0 1 0 252.118V48C0 21.49 21.49 0 48 0h204.118zM144 124c-11.028 0-20 8.972-20 20s8.972 20 20 20 20-8.972 20-20-8.972-20-20-20m0-28c26.51 0 48 21.49 48 48s-21.49 48-48 48-48-21.49-48-48 21.49-48 48-48z' fill='currentColor'/></svg>سكريبتات</a>
      </span>
      </div>
     </a>  
    </div>
  <div class='article'>
     <a href='https://libraryscripts.blogspot.com/2021/05/bsection.html'> 
      <img class='photo-article' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYOlrrtTUGOTrjWos2odl8kX9rKbjXFyd1kWaQ5Jvsmqit2D9XYkIhOPzOZOIOtSQ1aTdg6u-ujhMGWei_t0vL6OwMDk0EmAfvQA1FW3WgJu106lbnBmQLpIT0-XcSdAjMFlANVVC57FY/w400-h189/Screenshot_4.png'/>
      <div class='meta-article'>
      <div class='title-article'><a href='https://libraryscripts.blogspot.com/2021/05/bsection.html'>إنشاء قسم الادوات (b:section) في بلوجر.</a></div>
      <span class='category-article'>
      <a href='https://libraryscripts.blogspot.com/search/label/%D8%A5%D8%B9%D8%AF%D8%A7%D8%AF%D8%A7%D8%AA%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1'>
      <svg aria-hidden='true' class='icon small-icon' data-icon='tags' data-prefix='fal' focusable='false' role='img' viewBox='0 0 640 512' xmlns='http://www.w3.org/2000/svg'><path d='M625.941 293.823L421.823 497.941c-18.746 18.746-49.138 18.745-67.882 0l-1.775-1.775 22.627-22.627 1.775 1.775c6.253 6.253 16.384 6.243 22.627 0l204.118-204.118c6.238-6.239 6.238-16.389 0-22.627L391.431 36.686A15.895 15.895 0 0 0 380.117 32h-19.549l-32-32h51.549a48 48 0 0 1 33.941 14.059L625.94 225.941c18.746 18.745 18.746 49.137.001 67.882zM252.118 32H48c-8.822 0-16 7.178-16 16v204.118c0 4.274 1.664 8.292 4.686 11.314l211.882 211.882c6.253 6.253 16.384 6.243 22.627 0l204.118-204.118c6.238-6.239 6.238-16.389 0-22.627L263.431 36.686A15.895 15.895 0 0 0 252.118 32m0-32a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.746 18.746-49.138 18.745-67.882 0L14.059 286.059A48 48 0 0 1 0 252.118V48C0 21.49 21.49 0 48 0h204.118zM144 124c-11.028 0-20 8.972-20 20s8.972 20 20 20 20-8.972 20-20-8.972-20-20-20m0-28c26.51 0 48 21.49 48 48s-21.49 48-48 48-48-21.49-48-48 21.49-48 48-48z' fill='currentColor'/></svg>إعدادات بلوجر</a>
      </span>
      </div>
     </a>  
    </div>
</div>              
</b:if>

للمزيد من امثلة لستعمال هذا السكريبت زر الموقع الخاص به هنا 

المعاينة
أنت الان في اول موضوع
author-img
هنا و حول الكاتب يمكنك تغييره بماتريده.

أخر المواضيع من قسم : إضافات بلوجر

تعليقات

إرسال تعليق