illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6339 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

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

8 1819 ۲۴ اسفند ۹۳

در این مطلب میخوام یک ابزار بنام 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 قرار بدین ، اسلایدها بصورت اتوماتیک جابجا نمیشن

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 8 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

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

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

    • ‏‏
      محمد اسفندیاری(۲۵ اسفند ۱۳۹۳)

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

  • ‏‏

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

  • ‏‏

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

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram