۵ اسلایدر چرخشی برتر jQuery

اسلایدر چرخشی به پلاگین‌های معروفی از jQuery گفته می‌شود که به نمایش بهتر محتوای وب‌ سایت کمک می‌کنند. 


اسلایدر چرخشی در واقع یکی از جذاب‌ترین امکانات jQuery در طراحی سایت است. با رشد تلفن‌های هوشمند و تبلت‌ها، وب‌سایت‌های ریسپانسیو (Responsive) تبدیل به یک نیاز شده‌اند. هم‌چنین وب‌سایت باید برای تجربه‌ی کاربری بهتر بهینه شده باشد. این روزها توسعه‌دهندگان رابط کاربری (UI)، توجه ویژه‌ای به ریسپانسیو بودن و مهم‌تر از آن تجربه‌ی کاربری بهتر دارند.

چون تجربه کاربری از اهمیت ویژه‌ای برخوردار است، همیشه باید به دنبال پلاگین‌هایی بود که به کاربری وب سایت آسیبی نزند. در این مقاله ۵ اسلایدر چرخشی برتر jQuery (Carousel slider) معرفی می‌شوند. این پلاگین‌ها معمولا برای ایجاد گالری‌های تصاویر استفاده می‌شوند. همان‌طور که از اسم لاتین این پلاگین‌ها مشخص است، وظیفه‌ی آن‌ها نمایش چرخشی محتوا است. محتوای مورد استفاده، می‌تواند متن یا تصویر باشد. در نتیجه می‌توان از آن‌ها برای نمایش موردی چند عکس، نمایش بنرهای وب‌سایت، پیام‌های رضایت‌مندی مشتریان پیشین و همین‌طور متن‌های مختلف استفاده کرد.

این پلاگین‌های اسلایدر چرخشی پاسخگو و لمسی (Touch enabled) هستند. در این پلاگین‌ها تعداد بسیاری امکانات و تنظیمات وجود دارد که به شخصی‌سازی بیشتر کمک می‌کند. و جذاب‌ترین نکته این اسلایدرهای چرخشی، رایگان بودن آن‌ها است.

آشنایی بیشتر با جی کوئری در لیداوب:

۱. اسلایدر چرخشی Owl Carousel

Owl Carousel

اسلایدر چرخشی Owl Carousel یکی از ابزارهای محبوب در این زمینه است. پاسخگو و لمسی است و تنظیمات بسیار زیادی دارد که به شما برای استفاده بهتر از آن کمک می‌کند.

امکانات اسلایدر Owl Carousel:

  • پاسخگو
  • لمسی با پشتیبانی از رویدادهای لمسی
  • پشتیبانی از رویدادهای موس (کشیدن و رها کردن)
  • بی‌نهایت تنظیمات
  • امکان انتخاب تعداد موارد قابل نمایش
  • امکان قرار دادن چندین اسلایدر چرخشی در یک صفحه
  • پشتبانی از جابه‌جایی‌های سه بعدی در CCS3 (3D Transitions)
  • دکمه‌ّهای کنترلی قابل طراحی مجدد
  • پشتیبانی از JSON
  • رویدادهای سفارشی
  • پاسخ‌های مفید به درخواست‌ها (callbacks)

Owl carousel از اینترنت اکسپلورر نسخه ۷ به بعد، گوگل کروم، سافاری، فایرفاکس و دیگر مرورگرها پشتیبانی می‌کند. این پلاگین به خوبی در iOS و دستگاه‌های اندرویدی کار می‌کند. در حال حاضر آخرین نسخه‌ی این پلاگین 2.2.1 است.

مشاهده و دانلود

۲. اسلایدر چرخشی Slick

slick

Slick یک اسلایدر چرخشی دیگر است که در این فهرست قرار دارد. Slick هم مثل Owl carousel امکانات زیادی دارد. در زیر بعضی از این آن‌ها را مشاهده می‌کنید:

امکانات

  • کاملا پاسخگو. این اسلایدر نسبت به المان پدر خود تغییر اندازه می‌دهد
  • تنظیمات آسانی دارد
  • استفاده از CC3 با قابلیت پشتیبانی از مرورگرهای قدیمی
  • امکان خاموش یا روشن کردن امکان کشیدن لمسی
  • پشتیبانی از کشیدن و رها کردن با موس
  • چرخه‌ی بی‌نهایت
  • پشتیبانی از کلیدهای جهت روی کیبورد
  • امکان اضافه و کم کردن موارد اسلایدر چرخشی و فیلتر کردن آن‌ها
  • پخش خودکار

مشاهده و دانلود

۳. اسلایدر چرخشی Sly

sly

Sly سومین پلاگین از این فهرست اسلایدر چرخشی است. Sly یک اسلایدر چرخشی کار راه انداز است که از scrollbar هم پشتیبانی می‌کند. Sly از امکاناتی مثل اسلایدر متن، اسلایدر کل صفحه، چرخش بی‌نهایت، بارگذاری تأخیری محتوا و غیره بهره می‌برد. در زیر چندین امکان دیگر آورده شده است:

امکانات اسلایدر Sly:

  • پشتیبانی از غلتک موس یا همان اسکرول
  • Scrollbar
  • دکمه‌های پیمایش
  • گرفتن و رها کردن متن‌ها
  • چرخش خودکار موارد و صفحه‌ّها
  • تعداد زیادی متد مفید
  • اسلایدر عمودی
  • اسلایدر افقی
  • اسلایدر کل صفحه
  • چرخش بی‌نهایت
  • بارگذاری همزمان و با تأخیر اطلاعات
  • API خوانا و بسیار قوی

مشاهده و دانلود

۴. اسلایدر چرخشی Glide

glide

یکی دیگر از پلاگین‌های اسلایدر چرخشی Glide است. پاسخگو است، از دستورات لمسی پشتیبانی می‌کند، سبک و انعطاف‌پذیر است، و جلوه‌های سه بعدی زیبایی دارد. تعدادی از امکانات دیگر Glide:

امکانات اسلایدر Glide:

  • کاملا پاسخگو
  • لمسی
  • سبک. کمتر از ۱۵ کیلوبایت
  • API خوانا، پشتیبانی از ویژگی‌های HTML، و غنی از تنظیمات
  • استفاده از متدولوژی BEM {https://getbem.com/}

مشاهده و دانلود

۵. اسلایدر چرخشی bxslider

bxslider

آخرین اسلایدر چرخشی در این مطلب، bxslider است. این پلاگین از کشیدن لمسی پشتیبانی می‌کند. پاسخگو است و تنظیمات بسیار زیادی دارد. در زیر چند نمونه از امکانات این پلاگین را مشاهده می‌کنید:

امکانات

  • کاملا پاسخگو
  • اسلایدر افقی و عمودی.
  • پشتیبانی از اسلاید متن، عکس، ویدئو و حتی HTML
  • پشتیبانی پیشرفته و داخلی از دستورات لمسی و کشیدن
  • پشتیبانی از جابه‌جایی و انیمیشن‌های CSS3
  • تعداد زیادی API و متدهای کاربردی
  • سبک و استفاده از نمایه‌ّای مختلف
  • پشتیبانی از اینترنت اکسپلورر ۷ به بعد و مرورگرهای مدرن دیگر
  • پشتیبانی کامل از دستگاه‌های iOS و اندروید

مشاهده و دانلود

مطالعه بیشتر:

المان‌های زیادی هستند که به شما برای طراحی سایت زیبا و پیشرفته کمک می‌کنند تا در کسب و کار و هدف خود از راه اندازی وب سایت موفق‌تر باشید. می‌توانید برای اطلاع از آخرین اخبار مربوط به فریم ورک‌ها مختلف مثل لاراول و آشنایی با جدیدترین ترندها در زمینه طراحی وب و سئو، لیداوب را دنبال کنید.