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

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

0 1124 ۲۰ اردیبهشت ۹۴

در این مطلب میخوام یک پلاگین 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 باشه با گرفتن هر اسلاید و درگ کردن به بالا و پایین میتونین اون اسلاید رو خارج کنید و درون اسلایدها نباشه

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

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

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

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

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram