itemslide : پلاگین jQuery برای ساخت اسلایدر لمسی زیبا

١۶٣٩ visibility ٠ mode_comment

در این مطلب میخوام یک پلاگین jQuery بنام itemslide رو خدمت شما معرفی کنم و اونو آموزش بدم.

itemslide

با استفاده از این پلاگین میتونین اسلایدری زیبایی برای ساییتون قرار بدین که قابلیت درگ شدن رو داره ، میتونین با Mouse Wheel بین اسلایدها جابجا بشین. ظاهر و امکانات این اسلایدر خوبه و میتونین از اون استفاده کنید.

میبینید که 5 تا اسلاید قرار داره و با کلیک بر روی هر اسلاید ، اون اسلاید در وسط صفحه قرار میگیره و همچنین میتونین با درگ کردن و همچنین با استفاده از Mouse Wheel بین اسلایدها جابجا بشین.

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

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به sliding.css و jquery.min.js و itemslide.min.js و jquery.mousewheel.min.js و slideout.js نیاز داریم. این فایلهارو در انتهای مطلب قرار دادم و میتونین از اونا استفاده کنید.

حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای CSS و HTML مورد نظر رو نوشتیم.

اولین کاری که باید بکنید اینه که ul خودتون رو قرار بدین و همچنین برای هر اسلاید یک li در اون قرار بدین :

در بالا 5 تا اسلاید قرار دادم. حالا باید در تگ اسکریپت نهایی این ul رو انتخاب کنم و متد itemslide رو برای اونا فراخوانی کنم :

حالا باید ویژگی های مدنظرمون رو به اون اعمال کنیم. اولا بگم که برای اینکه بتونین از Mouse Wheel استفاده کنید باید از فایل jquery.mousewheel.min.js استفاده کنیم. برای استفاده از slideout هم باید فایل slideout.js رو اضافه کنید. بصورت زیر :

ویژگی های مهم این ابزار :

  •  duration : مدت زمان جابجا شدن بین هر اسلاید
  • disable_slide : اگر مقدار این ویژگی true باشه ، دیگه نمیتونین با استفاده از درگ کردن بین اسلایدها جابجا بشین
  • disable_clicktoslide : اگر مقدار این ویژگی True باشه ، با کلیک کردن بر اسلایدهای مجاور به اونا منتقل نمیشید.
  • disable_scroll : اگر true باشه با استفاده از Mouse Wheel نمیتونین بین اسلایدها جابجا بشید
  • start : میتونین اسلایدی که در ابتدا نمایش داده میشه رو مشخص کنید. اسلاید اول از 0 شروع میشه. من که 2 گذاشتم یعنی میخوام در ابتدا اسلاید سوم نمایش داده بشه
  • one_item : اگر True بزارین در هر جابجایی میتونین بین یک اسلاید جابجا بشید
  • parent_width : اگر true باشه ، عرض اسلاید برابر با عرض عنصر پدرش خواهد شد
  • swipe_out : اگر true باشه با گرفتن هر اسلاید و درگ کردن به بالا و پایین میتونین اون اسلاید رو خارج کنید و درون اسلایدها نباشه

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

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

موفق باشید. یا علی

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

نیاز به لاگین

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