50درصد تخفیف سورس فروشگاهی دیجی کالا + اپلیکیشن اندروید تا پایان این هفته - کد تخفیف : off50
با تخفیف میخرم

ساخت اسلایدر عکس با jQuery

  • آپدیت شده در تاریخ

ساخت اسلایدر عکس با jQuery

بروزرسانی در ۱۳۹۷/۰۱/۲۵ : افزودن قابلیت pause به اسلایدر

در این آموزش, فصد داریم به شما نحوه ساخت اسلایدر عکس با jQuery را نشان بدیم. در آموزش jQuery قبلی , یک نمونه از ساخت اسلایدشو با جی کوئری را دیدیم.

در این مثال , ما از کتابخانه jQuery UI برای ساخت اسلایدر تصویر بهره می بریم. که افکت های جالبی برای slide کردن تصاویر در اختیار ما قرار می دهد.

ساخت اسلایدر عکس با jQuery

کد HTML نمایش عکس های اسلایدر

این کد به شما تصاویر اضافه شده به پنجره slider را نشان می دهد.

افکت ساخت اسلایدر عکس با jQuery

کد jQuery زیر از کتابخانه jQuery UI برا افزودن افکت slide به تصاویر استفاده می کند.

و کد زیر بعد از آماده سازی DOM فراخوانی می شود .

ساخت اسلایدر عکس با jQuery با قابلیت ایست (pause)

برای استفاده از قابلیت ایست در اسلایدری که ساختیم می توانید به جای اسکریپت بالا از کد زیر استفاده کنید. کد دقیقا مشابه کد بالا است بجز اینکه یک قسمت برای pause کردن اسلایدر تصویر را اضافه کردیم برای همین نیازی به تغییر کد HTML نیست.

به اینصورت که بعد از نگه داشتن ماوس روی یکی از اسلایدها (hover) متغییر pause مقدار true را به خود میگیرد که در یک شرط تعریف کردیم تا کد اجرای اسلایدر در صورتی که مقدار pause = true باشد اجرا نشود.

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

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

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید.

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۳)

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

  1. احمد ۲۷ مهر ۱۳۹۹

    سلام این اسلاید شو دمو نداره؟

    پاسخ
    1. حسن شفیعی ۲۸ مهر ۱۳۹۹

      سلام. خیر به سادگی راه اندازی و نتیجه رو ببینید

      پاسخ
  2. احمد ۲۷ مهر ۱۳۹۹

    سلام دمو نداره؟

    پاسخ
دوره های آموزشی