ساخت Carousel با jQuery

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

ساخت Carousel با jQuery

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

تفاوت Carousel با Slider در نحوه نمایش آنها است . با استفاده از اسلایدر ما تصاویر را یکی پس از دیگری با افکت های مخنلف بصورت خودکار و با مکث و معمولا افقی نمایش میدیم اما در Carousel معنی اسلاید وجود ندارد و در واقع یک گرداننده (چرخ و فلک) وجود دارد که ما با کلیک بر روی دکمه های مشخص شده تصویر یا متن بعدی بصورت افکت های fade بصورت ۳d نه اسلایدی را نمایش میدیم.

ساخت Carousel با jQuery

در این مثال, ما چهار تصویر برای اجرای Carousel داریم.آیکون های قبل و بعد را با رویداد mouse-over نمایش می دیم که با کلیک بر روی آن تصاویر تغییر میکند.

ساخت Carousel با jQuery

کد HTML ساخت Carousel با jQuery

در اینجا , ما کدهای HTML برای چهار تصویر به همراه دکمه های قبل و بعد را داریم.

اسکریپت ساخت Carousel با jQuery

این کد jQuery برای نمایش تصاویر بصورت یک به یک استفاده می شود. این رویداد با کلیک بر روی کنترلر های قبلی و بعدی اجرا می شود.

برای کپی صحیح و کامل کدها ، دابل کلیک کرده تا وارد محیط سفید و کپی شوید در غیر اینصورت امکان دارد اجرای کدها با مشکل روبرو شود

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

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

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

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

حسن شفیعی توسعه دهنده وب و موبایل مدیر سایت علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم. اگر نیاز به برنامه نویس برای انجام پروژه و نوشتن اسکریپت های سمت وب, اپلیکیشن های اندروید و ios, پیدا کردن راه حل توسعه و غیره داشتید حتما از طریق تماس با ما/ واتساپ/ تلگرام بهم پیام بدید. برایتهیه هاست مطمین و پرسرعت کلیک کنید
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۴)

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

  1. علیرضا ساجدی ۶ مرداد ۱۳۹۷

    سلام
    میخواستم یکم درمورد امنیت سایت تدریس کنید
    php باشه
    تشکر

    پاسخ
    1. حسن شفیعی ۶ مرداد ۱۳۹۷

      سلام . از قسمت جستجو میتونید در مورد امنیت سایت و اعتبارسنجی سرچ کنید .
      موفق باشید.

      پاسخ
  2. علیرضا ساجدی ۶ مرداد ۱۳۹۷

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

    پاسخ
    1. حسن شفیعی ۶ مرداد ۱۳۹۷

      سلام . ممنون . خوشحالم که مفید واقع شده . برای اینکار نیازه که از صف بندی در php استفاده کنید
      https://netparadis.com/queue-in-php-1/
      موفق باشید.

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