7 نمونه از بهترین پلاگین اسلایدر تصاویر و محتوای jQuery



visibility  
mode_comment   ۴

در این مطلب 7 نمونه از بهترین پلاگین اسلایدر تصاویر و محتوای jQuery معرفی میشه که میتونین از اونا در سایتتون استفاده کنید.

اینطور میشه گفت که تقریبا در همه سایتها و برنامه هایی که درست میکنید، به یک یا چند اسلایدر نیاز دارید تا تصاویر و محتوای مورد نظرتون رو به کاربران نمایش بدین. چیزی که برای انتخاب یک پلاگین اسلایدر مناسب بیشترین نقش رو داره، ساده بودن استفاده از اون هست. شما با یک جستجو ساده میتونین تعداد بسیار زیادی از اونا رو پیدا کنید که بعضی از اونا رایگان و بقیشون پولی هستند. بخاطر همینه که در اینجا 7 نمونه از بهترین اسلایدرهای jQuery رایگان و معروف که استفاده از اونا هم ساده هست قرار داده میشه تا راحتتر بتونین این انتخاب رو انجام بدین.

7. اسلایدر FlexSlider

FlexSlider یک پلاگین اسلایدر عالی و واکنشگرای jQuery هست. مرورگرهای سافاری 4 به بالا، کروم 4 به بالا، Firefox نسخه 3.6 به بالا، Opera نسخه 10 به بالا، Internet Explorer 7 به بالا از این اسلایدر پشتیبانی میکنن. iOS و Android نیز به خوبی از این اسلایدر پشتیبانی می‌کنند. برای استفاده از این اسلایدر باید از jQuery نسخه 1.7 به بالا استفاده کنید.

آدرس صفحه Github

6. اسلایدر GlideJS

GlideJS یک پلاگین اسلایدر واکنشگرا هست که به خوبی بر روی دستگاه های لمسی کار میکنه. این اسلایدر از انیمیشنهای CSS3 استفاده میکنه و به همین خاطر ساده، سبک و سریع می‌باشد. این اسلایدر در تمامی مرورگرهای مدرن و IE 10 به بالا پشتیبانی میشه. حجم این ابزار خیلی کم هست و بصورت فشرده تقریبا 14 کیلوبایت میشه. کار با اون خیلی ساده و راحته و به راحتی میتونین اون رو سفارش سازی کنید.

آدرس صفحه Github

5. اسلایدر Sly

Sly یک پلاگین اسلایدر یک جهته (افقی یا عمودی) هست که ویژگی های اصلی اون عبارتند از:

  • اسکرول کردن با استفاده از چرخنده ماوس
  • جابجا شدن بین اسلایدها با استفاده از اسکرول اسلایدر
  • دکمه های Navigation مختلف
  • جابجا شدن اتوماتیک بین اسلایدها
  • متدهای مفید و کاربردی دیگر

این اسلایدر از requestAnimationFrame استفاده میکنه و خیلی بهینه هست.

آدرس صفحه Github

4. اسلایدر LightSlider

LightSlider یک پلاگین اسلایدر سبک و واکنشگرا هست که میتونین برای تصاویر و محتوا از اون استفاده کنید. یک لیست Thumbnail در کنار اسلایدر قرار داده میشه که با کلیک بر روی اونا میتونین به اسلاید مربوط به اونا منتقل بشید. ویژگی های این اسلایدر عبارتند از:

  • بر روی هر دستگاهی به خوبی نمایش داده میشه
  • برای هر Breakpoint دستورات مجزا دارد
  • میتونین از حالت گالری استفاده کنید تا Thumbnail نمایش داده بشه
  • میتونین اسلایدها رو بصورت لمسی و درگ کردن جابجا کنید
  • اضافه و حذف کردن اسلایدها بصورت داینامیک
  • حجم کمی داره و به راحتی میتونین اون رو در سایتتون قرار بدین.
  • از CSS3 Animation استفاده میکنه و در مرورگرهایی که پشتبانی نمیشن از jQuery به عنوان پشتیبان بهره میگیره
  • با استفاده از کیبورد و دکمه های مختلف میشه اسلایدها رو عوض کرد
  • تقریبا در همه مرورگرها کار میکنه
  • افکت های زیبا
  • پشتیبانی از حالت راست به چپ
  • استفاده از چند اسلایدر بصورت همزمان در یک صفحه
  • هر چیزی رو میتونین در اسلایدها قرار بدین

آدرس صفحه Github

3. اسلایدر BxSlider

BxSlider یک پلاگین اسلایدر واکنشگرا و بر پایه jQuery می‌باشد. ویژگی های بارز این اسلایدر عبارتند از:

  • بر روی هر دستگاه با هر سایزی به خوبی نمایش داده میشه
  • حالت افقی و عمودی و مخفی شدن
  • اسلایدها میتونن عکس یا ویدیو یا محتوا رو درون خودشون قرار بدن
  • پشتیبانی از دستگاه های لمسی
  • استفاده از CSS3 Animation
  • حجم کم و استفاده راحت
  • پشتیبانی خوب از مرورگرها
  • قابلیت سفارش سازی عالی

آدرس صفحه Github

2. اسلایدر Unslider

UnSlider یکی از ساده ترین اسلایدرها هست و به سرعت میتونین از اون در سایتتون استفاده کنید. شما فقط کافیه که لیست مورد نظرتون رو قرار داده و محتوا رو درون آیتم ها قرار بدین و کلاسها و کدهای jQuery رو نیز تنظیم کنید. بقیه کارها توسط UnSlider انجام میشه.

آدرس صفحه Github

1. اسلایدر Slick

Slick یکی از بهترین اسلایدرهای واکنشگرا هست که میتونین اون رو با خیال راحت انتخاب کنید. برای هر Breakpoint میتونین تنظیمات جداگانه ای رو مشخص کنید. تا جایی که مرورگر پشتیبانی کنه از CSS3 Animation استفاده میشه. از درگ کردن و دستگاه های لمسی پشتیبانی میکنه. ویژگی های بسیار زیاد دیگه ای هم داره که خودتون میتونین اونا رو ببینید.

آدرس صفحه Github

اگر شما هم اسلایدر خوب و رایگان دیگه ای رو سراغ دارید لطفا اون رو در بخش کامنتها با بقیه دوستان به اشتراک بذارید.

امیدوارم از این مطلب خوشتون اومده باشه.

Source

comment دیدگاه کاربران

جای owl slider و responsiveslides خالیه 😉

محمد اسفندیاری

بله صد در صد😉

Hosein

اسلایدر Swiper هم خیلی قدرتمنده و باهاش میشه تقریبا همه کار کرد ولی خوب یکم حجمش زیاده :-)) بیشتر به درد سایتایی میخوره که اسلایدر های زیادی دارن.
http://idangero.us/swiper/demos/

Hosein

البته به این قسمت نگاه نکردم با استفاده از این قسمت میشه یه نسخه سفارشی شده با استفاده از gulp یا es6 ساخت تا حجمش رو بیاد پایین.
http://idangero.us/swiper/api/#custom-build

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.