flickity : اسلایدری Responsive و متناسب با دستگاه های لمسی

- visibility ۸ mode_comment

در این مطلب میخوام یک ابزار بنام flickity رو خدمتتون معرفی کنم که با استفاده از اون میتونین اسلایدری زیبا و واکنشگرا بسازید که هم برای Desktop و هم موبایل بخوبی اجرا میشه و تجربه کاربری خوبی رو در ذهن کاربران بجا میزاره. این اسلایدر در IE8 به بالا پشتیبانی میشه. flickity 

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به فایلهای jquery.min.js و flickity.pkgd.min.js و flickity.min.css نیاز داریم. من این فایلهارو رو در انتهای این مطلب قرار دادم و میتونین از اونا استفاده کنید. حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای HTML و CSS مورد نظر رو نوشتیم. در ابتدا باید یک div کلی که در بردارنده کل اسلایدر هست رو قرار بدین. من در بالا کلاس main-gallery رو بهش نسبت دادم. بصورت زیر :

حالا باید هر اسلاید رو بصورت یک div قرار بدین و کلاس gallery-cell رو به هرکدوم نسبت بدین. به هر تعداد که بخواین میتونین اسلاید قرار بدین ، من در بالا 4 تا اسلاید قرار دادم که کدش بصورت زیر خواهد بود :

درون هر کدوم هم میتونین المنتها و محتویات مورد نظرتون رو قرار بدین. من در بالا در هر کدوم فقط یک عدد قرار دادم. حالا باید بیاین و با استفاده از کدهای Javascript اسلایدر رو راه بندازین. برای اینکار باید اول div کلی رو انتخاب کنید و متد flickity رو برای اون فراخوانی کنید ، بصورت زیر :

با اینکار اسلایدرتون ساخته میشه و تمام تنظیمات بصورت پیش فرض اعمال میشه. این متد ویژگیهای زیادی داره که من در زیر مهمتریناش رو قرار دادم :

 توضیح هر کدام :

  • cellAlign : با استفاده از این ویژگی جهت قرار گیری اسلاید ها رو میتونین مشخص کنید. سه مقدار left و Right و center رو قبول میکنه
  • wrapAround : اگر این خاصیت true باشه ، وقتی که به اسلاید نهایی برسید ، میتونین به اسلاید اول برید و حالت چرخشی داره
  • freeScroll : اگر این خاصیت true باشه ، جابجا کردن اسلایدها به هر میزانی دست شماست و اگر false باشه ، نمیتونین به هر مقداری که بخواین اسلاید رو جابجا کنید
  • prevNextButtons : اگر این خاصیت false باشه ، دکمه های قبل و بعد مخفی میشن
  • pageDots : اگر این خاصیت false باشه ، دایره های پایین اسلایدر مخفی میشن
  • autoPlay : با استفاده از این ویژگی میتونین زمان رفتن اتوماتیک به اسلاید بعدی رو مشخص کنید که بر حسب میلی ثانیه هست. اگر false قرار بدین ، اسلایدها بصورت اتوماتیک جابجا نمیشن

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

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

سلام
ممنون جناب اسفندیاری
پلاگین خیلی جالبی بود

فقط یه سوال
توی دموی شما، اگر روی دایره های navigation یا فلش های چپ و راست، یا حتی خود اسلایدر کلیک کنیم؛ اسلایدر pause میشه و دیگه حرکت نمیکنه

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

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

صبا‏

با سلام
می خواستم درخواست کنم اسلایدری که نیاز به استفاده از کد CSS (فایل جانبی) نداشته باشد یا کد CSS آن طوری باشد که بتوان در همان فایل html اصلی از آن استفاده کرد معرفی کنید.

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

منظورتون رو متوجه نشدم
میشه بیشتر توضیح بدین؟

rezad91

سلام خیلی ابزار خوبی تشکر
یک سوال: اگر بخواهیم که یک محل عنوان برای تصاویر اضافه کنیم چه کار باید کرد؟منظورم عنوان مطالب می باشد.
یا حق

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

دقیقا منظورتون رو متوجه نشدم
میشه بیشتر توضیح بدین

rezad91

شما به اسلایدر همین سایت نگاه کنید،منظور عنوان مطلب (تایتل)می باشد.تیتر پست
امیدوارم منظورم رو متوجه شده باشید

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

خود اسلایدر که نداره ، شما میتونین درون هر اسلاید یک بخش قرار بدین و استایل مورد نظرتون رو به اون اعمال کنید

نیاز به لاگین

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