تعرف على Flickity Slider , سلايدر جافاسكريبت من عالم آخر !

ما هو Flickity Slider

لا شك بأنك لاحظت كمطور ويب أنه لا يكاد يخلو موقع من وجود سلايدر صور أو عبارات أو الاثنين معاً لعرض معلومات بطريقة منمقة و جميلة تُشعر المستخدم بمدى سهولة الاطلاع عليها ، سنقدم لكم في هذه المقالة شرحاً مبسطاً عن إحدى أهم إضافات الjQuery التي توفر لك سلايدر يختصر عليك الكثير من الجهد والوقت وهو Flickity Slider الذي من أهم ميزاته أنه يعمل باللمس أي يمكن للمستخدم تصفح الشرائح باللمس في جميع الأجهزة.

كيف أبدأ باستخدام Flickity Slider

لنبدأ معاً بتضمين الملفات الضرورية بعد تحميل ملفات Flickity من الموقع الرسمي: (https://flickity.metafizzy.co)

نقوم بتضمين ملف الCSS الخاص بFlickity:

<link rel="stylesheet" type="text/css" href="/path/to/your/file/flickity.min.css">

ثم تضمين ملف jQuery وملف الجافاسكربت الخاص بFlickity:

<script type="text/javascript" src="js/jquery-2.1.4.js"></script>

ثم بعدها لنبدأ بالبنية العامة للسلايدر التي هي على الشكل:

<div class="main-carousel">
 <div class="carousel-cell">…</div>
 <div class="carousel-cell">…</div>
 <div class="carousel-cell">…</div>
 <div class="carousel-cell">…</div> 
</div>

هذا هو الشكل العام للسلايدر حيث أن كل شريحة يكون لها الصف carousel-cell وجميع الشرائح بداخل الmain-carousel وحالياً كل شريحة تحتوي فقط ثلاث نقاط .

سلايدر صور باستخدام Flickity Slider

بفرض اننا نريد بناء سلايدر صور, فيختلف الكود بشكل بسيط وهذا هو الشكل العام للكود :

<div class="main-carousel">

 <div class="carousel-cell">
   <img src="images/first.png">
 </div>

 <div class="carousel-cell">
   <img src="images/second.jpg">
 </div>

 <div class="carousel-cell">
   <img src="images/third.png">
 </div>

 <div class="carousel-cell">
   <img src="images/fourth.jpg">
 </div> 
 

ولتكون الصور تملأ الصفحة بنسبة 100% نضيف الكود التالي:

.carousel-cell, img{
 width:100%;
 height:70vh
}

إذا قمنا الآن بزيارة صفحة الويب سنرى أن الصفحة هي عبارة عن سلسلة صور متتابعة ولا يوجد سلايدر؟!!!

السبب هو أنه لم تتم تهيئته ولنفعل ذلك نضيف الكود التالي:

<script>
  $('.main-carousel').flickity(); 
</script>

الآن سيعمل السلايدر بشكل صحيح:

ويمكنك أن تجرب أنه يعمل باللمس...

في الحقيقة فإن هذه الإضافة توفر إمكانيات هائلة مثلاً إذا أردت إخفاء أسهم الشريحة السابقة واللاحقة والنقاط التي تظهر أسفل السلايدر يمكننا تعديل الخصائص كما يلي:

$('.main-carousel').flickity({
 prevNextButtons: false,
 pageDots: false
});

وحتى هذه اللحظة فإننا إذا وصلنا إلى آخر شريحة واستمرينا بالتقليب فلن يظهر بعدها أي شريحة، في حال أردت تفعيل خاصية أنه بعد آخر شريحة يعود السلايدر إلى أول شريحة فيمكن ذلك بتعديل خاصية wraparound وإعطائها قيمة true :

$('.main-carousel').flickity({
 prevNextButtons: false,
 pageDots: false,
 wrapAround:true,
});  

وتلاحظ بعدها أنه عند استمرارك بالتقليب بعد الشريحة الأخيرة ستظهر الشريحة الأولى ثم الثانية...

يمكن أن تقرر أنك تريد عرض كل صورتين معاً يمكنك ذلك باستخدام خاصية groupCells وإعطائها رقم 2 أو أي رقم آخر ترغب به فإذا كان لدينا الكود:

$('.main-carousel').flickity({
 prevNextButtons: false,
 pageDots: false,
 wrapAround:true,
 groupCells: 2
});

ستصبح كل شريحة تضم صورتين كالتالي:

ومن الخيارات المهمة أيضاً أنه بإمكانك استخدام خاصية autoPlay وإعطائها إما قيمة true لتتغير الشرائح بشكل تلقائي كل 3 ثواني أو قيمة زمنية تقدر بالميلي ثانية مثلا:

autoPlay: 1500

أي يتم تغيير الشريحة كل 1.5 ثانية ولاحظ أنه اذا وضعت الماوس على الشريحة تبقى ثابتة ولا تتغير حتى تبعده ويمكنك أيضاً تعطيل هذه الخاصة بإعطائها القيمة false.

pauseAutoPlayOnHover: false

في النهاية ...

الاضافات الجمالية للمواقع مهمة وربما أساسية لكل مصمم ويب يريد النجاح في مسيرته المهنية , يوجد العديد من معارض الصور (Sliders) يمكنك الاختيار فيما بينها ربما اخترنا لك الأفضل حسب توجهاتنا وارائنا الشخصية , ربما تفضل استخدام اضافة أخرى فالامر في النهاية عائد لك ولما انت معتاد على التعامل معه وما يتناسب وطبيعة الموقع الذي تعمل عليه .