کتابخانه
slick-carousel یه کتابخانه جاوااسکریپت برای ساخت اسلایدر و کاروسل توی صفحه های وبه که روی jQuery سوار می شه. با اون می تونی تصویر، کارت محصول یا نقل قول رو کنار هم بچرخونی، تعداد اسلایدهای هر نمایش رو برای موبایل و دسکتاپ جدا تنظیم کنی و با کشیدن انگشت ورق بزنی. سازنده اش Ken Wheeler و مجوزش MIT هست.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
۱۵۷ کیلوبایت· ۱۵ فایل· انتشار
SHA-256: 26560df683d14d64b1083b17471de0a219ebcabfcccc2dc177f6d6a3163335a6
تقریباً هر سایتی یه جایی اسلایدر داره: بنر صفحه اول فروشگاه، محصولات پرفروش، نظر مشتری ها، لوگوی همکارها. اگه همه این ها رو از صفر با CSS و جاوااسکریپت بنویسی کلی وقت می بره، مخصوصاً وقتی لمس موبایل، ریسپانسیو بودن و دکمه های قبلی و بعدی هم لازم باشه. slick-carousel برای همین کار ساخته شده. شعار رسمی اش هم یه جمله است: «آخرین کاروسلی که لازم داری». توی خیلی از قالب ها و افزونه های وردپرسی هم بارها دیده می شه.
کار باهاش ساده است. یه کانتینر می سازی، هر اسلاید یه المنت داخلش می شه و با یه فراخوانی، کاروسل آماده است. بقیه کار با گزینه هاست. مثلاً slidesToShow تعداد اسلایدهای همزمان رو مشخص می کنه، slidesToScroll تعداد اسلایدی که با هر کلیک جابه جا می شه، و autoplay چرخش خودکار رو روشن می کنه. dots، arrows، infinite و fade هم ظاهر و رفتار اسلایدر رو کنترل می کنن. با responsive هم می تونی بگی از یه عرض مشخص به پایین، مثلاً توی موبایل، فقط یه اسلاید نشون بده.
برای سایت های فارسی یه نکته مهمه: راست به چپ بودن. slick گزینه rtl داره و بهتره خود کانتینر هم راست به چپ باشه. بعد از تنظیم، ترتیب اسلایدها و سمت فلش ها رو حتماً روی یه موبایل واقعی امتحان کن، چون چیدمان توی مرورگرهای مختلف ممکنه فرق کنه. مسیر فایل ها هم مهمه. اگه کتابخانه رو از یه CDN خارجی صدا بزنی، توی روزهایی که اینترنت بین الملل مشکل داره، اسلایدر سایتت هم از کار می افته. فایل ها رو روی هاست خودت نگه دار. اگه اسلایدرت تصویر زیاد داره، گزینه lazyLoad هم کمک می کنه همه عکس ها یکجا لود نشن.
کجا مناسب نیست؟ slick به jQuery وابسته است. وردپرس jQuery رو داره و مشکلی پیش نمیاد، ولی اگه پروژه ات با React، Vue یا یه ابزار مدرن بدون jQuery نوشته شده، بهتره سراغ یه کاروسل مستقل از jQuery بری. یه نکته دیگه هم هست: به نظر می رسه نگهداری و توسعه slick مثل قبل فعال نیست. برای پروژه ای که قراره سال ها بدون دست زدن بمونه، جایگزین ها رو هم نگاه کن.
نسخه های رسمی و بدون تغییر slick-carousel توی مخزن داخلی ما هم در دسترسه. اگه دسترسی به منبع اصلی قطع بود، می تونی از همین جا برداری.
کار با slick چند قدم بیشتر نیست.
توی وردپرس بهتره اسکریپت ها رو با روش استاندارد به قالب اضافه کنی و jQuery رو وابستگی slick تعریف کنی. اگه اسلایدر کار نکرد، اول کنسول مرورگر رو باز کن. بیشتر وقت ها خطای همون جا نوشته شده.
گزینه rtl رو روشن کن و مطمئن شو کانتینر اسلایدر هم راست به چپ تعریف شده. اگه فلش ها هنوز سمت اشتباه نشون داده می شن، CSS دکمه ها رو چک کن. بعد از تنظیم، حتماً ترتیب اسلایدها رو روی موبایل واقعی هم امتحان کن.
نه، slick به jQuery وابسته است و بدونش اجرا نمی شه. توی وردپرس jQuery معمولاً هست و مشکلی نداری. اما اگه پروژه ات با React یا Vue نوشته شده یا نمی خوای jQuery بارگذاری کنی، بهتره یه کاروسل مستقل از jQuery انتخاب کنی.
از گزینه responsive استفاده کن. یه عرض مشخص تعریف می کنی، مثلاً عرض موبایل، و برای همون عرض slidesToShow رو روی یک می ذاری. بقیه تنظیم ها همون مقدارهای اصلی می مونن، مگه اینکه توی همون بخش عوضشون کنی. بعد از ذخیره، صفحه رو با عرض های مختلف و روی یه موبایل واقعی امتحان کن.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.