کتابخانه
Splide (با نام بسته @splidejs/splide) یه کتابخانه جاوااسکریپت سبک برای ساخت اسلایدر و کروسله. به کتابخانه دیگه ای وابسته نیست، با کیبورد و صفحه خوان سازگاره و برای بنر صفحه اصلی، لیست محصولات، گالری تصاویر و نظرات مشتری ها به کار می ره. مجوزش MIT هست و تو وردپرس و پروژه های HTML ساده راحت اجرا می شه.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
۳۵۷ کیلوبایت· ۱۴ فایل· انتشار
SHA-256: 159b16ec7d95e57f531a29d28e3c18278d7d5e46b6ec8f173c3996af21a55adc
اگه تا حالا برای یه اسلایدر ساده مجبور شدی یه کتابخانه سنگین و وابسته به jQuery رو بکشی تو صفحه، Splide دقیقاً برای همین دردسر ساخته شده. @splidejs/splide رو Naotoshi Fujita نوشته و مجوزش MIT هست، یعنی هم تو پروژه شخصی و هم تو کار مشتری می تونی ازش استفاده کنی. معرفی خود پروژه هم همینه: اسلایدر سبک، انعطاف پذیر و در دسترس، بدون وابستگی به کتابخانه دیگه.
کار اصلی Splide نمایش یه مجموعه اسلاید تو یه کادره. مثلاً بنر بالای صفحه اصلی، ردیف محصولات پرفروش فروشگاه، گالری نمونه کار یا بخش نظرات مشتری ها. حالت اسلاید معمولی، چرخشی (loop) و محو شدن (fade) رو داره. می تونی تعداد اسلاید هر صفحه رو مشخص کنی و با breakpoints برای موبایل و دسکتاپ تنظیم جدا بدی. پخش خودکار، جهت عمودی و بارگذاری تنبل تصاویر هم جزو امکاناتشه. حالت راست به چپ هم داره، پس برای سایت فارسی لازم نیست سراغ ترفندهای CSS بری.
یه نکته که تو سایت های ایرانی کمتر بهش توجه می شه، دسترسی پذیریه. Splide از کنترل با کیبورد و ویژگی های ARIA پشتیبانی می کنه، پس کاربرهایی که با ماوس یا لمس کار نمی کنن هم می تونن اسلایدت رو بخونن و جابه جا کنن. برای کارهای خاص تر افزونه های جانبی رسمی هم داره، مثلاً برای اسکرول خودکار پیوسته یا چیدمان شبکه ای. برای React و Vue و Svelte هم بسته های جدا وجود داره.
پس کجا به درد می خوره؟ اگه یه کتابخانه سبک و تمیز می خوای که کنترلش دست خودت باشه، انتخاب خوبیه. ولی اگه فقط یه ردیف کارت افقی ساده می خوای که با انگشت کشیده بشه، شاید CSS scroll-snap به تنهایی کافی باشه و اصلاً به کتابخانه احتیاج نداشته باشی. اگه دنبال یه افزونه وردپرس با رابط گرافیکی هستی هم Splide اون نیست. یه کتابخانه ست و باید با HTML و جاوااسکریپت ازش استفاده کنی.
موقع استفاده چند چیز رو یادت باشه. تصاویر اسلایدر رو قبل از آپلود بهینه کن، چون سبک بودن کتابخانه جلوی کند شدن صفحه با عکس های درشت رو نمی گیره. تعداد اسلایدها رو هم زیاد نکن. تو روزهای محدودیت اینترنت بین الملل ممکنه CDN خارجی بالا نیاد، پس بهتره فایل ها رو روی هاست خودت نگه داری. نسخه های رسمی و بدون تغییر این کتابخانه تو مخزن داخلی ما هم در دسترسه و می تونی از همین جا برداری.
برای اضافه کردن Splide به یه صفحه، همین قدم های کلی کافیه:
تو وردپرس هم مسیر همینه. فایل ها رو با wp_enqueue_style و wp_enqueue_script از functions.php قالب یا یه افزونه کوچیک خودت لود کن. بعدش ساختار HTML رو تو ویجت HTML صفحه ساز یا تو خود قالب بذار. آخرش هم حتماً روی موبایل و با متن فارسی تستش کن، چون مشکل جهت حرکت و فاصله ها همون جا زودتر خودش رو نشون می ده.
نه. Splide وابستگی خارجی نداره و با جاوااسکریپت ساده کار می کنه. فقط فایل جاوااسکریپت و CSS خودش رو لود کن و ساختار HTML رو بساز. اگه سایتت jQuery هم داره، معمولاً تداخلی پیش نمیاد و می تونی کنارش استفاده کنی، چون هیچ کدوم به اون یکی نیازی ندارن.
بله، حالت راست به چپ رو پشتیبانی می کنه و تو تنظیمات می تونی جهت رو مشخص کنی. با این حال بعد از پیاده سازی، جهت حرکت اسلایدها، فلش ها و کلیدهای کیبورد رو روی موبایل و دسکتاپ خودت تست کن، چون چیدمان هر قالب یه کم فرق داره.
Splide افزونه وردپرس نیست و باید دستی اضافه ش کنی. فایل های CSS و جاوااسکریپت رو با wp_enqueue_style و wp_enqueue_script تو قالب یا یه افزونه کوچیک لود کن، بعد ساختار HTML اسلایدر رو تو صفحه یا ویجت HTML بذار و اسکریپت mount رو اضافه کن.
هر دو کتابخانه خوبی برای اسلایدر هستن. Splide تمرکزش روی سبک بودن، سادگی و دسترسی پذیریه، پس اگه فقط یه اسلایدر معمولی و تمیز می خوای انتخاب راحتیه. اگه امکانات خیلی خاص مثل افکت های سه بعدی لازم داری، مستندات هر دو رو نگاه کن و ببین کدوم نیازت رو مستقیم پوشش می ده.
بله. مجوز Splide از نوع MIT هست و استفاده تجاری، تغییر و توزیع رو آزاد می ذاره. فقط اطلاعیه مجوز و کپی رایتی که همراه کتابخانه هست نباید حذف بشه. اگه فایل ها رو فشرده می کنی، همون اطلاعیه رو بالای فایل یا تو یه فایل جدا نگه دار.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.