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

مرجع کار با JS Carousel در Bootstrap 4

دوره های مرتبط با این مقاله

مرجع کار با JavaScript carousel در Bootstrap 4 :

در این درس به آموزش کار با کلاس، خواص و متدهای JS carousel در Bootstrap 4 خواهیم پرداخت. همانطور که می دانید از carousel در بوت استرپ 4، برای ایجاد اسلایدر استفاده می شود.

آموزش کلاس های JS carousel در بوت استرپ 4:

جدول زیر، کلیه کلاس های کار با JS carousel در بوت استرپ 4 را همراه با توضیح، ارائه کرده است.

این کلاس ها را می توانید برای استایل دهی و کار با اسلاید و صفحات استفاده کنید :

کلاس
توضیحات
کلاس carousel
یک اسلایدر یا carousel ایجاد می کند.
کلاس carousel-indicators
نشان دهنده اسلاید یا پیمایش را به carousel اضافه می کند. معمولا به صورت خط یا نقطه هایی در قسمت پایینی عکس های اسلاید هستند که نشان می دهد اسلایدر چند تا عکس دارد و کاربر در حال حاضر، در حال دیدن کدام اسلاید است.
کلاس carousel-inner
عکس ها یا Slide (اسلایدها) را به اسلایدر اضافه می کند.
کلاس carousel-item
محتویات درون هر اسلاید را تعیین می کند.
کلاس carousel-control-Prev
یک دکمه سمت چپ (قبلی یا previous) را به اسلایدر اضافه می کند، که به وسیله آن می توانید در اسلایدر به عقب رفته و عکس های قبلی را مشاهده کنید.
کلاس carousel-control-next
دکمه سمت راست (بعدی یا next) را به اسلایدر اضافه می کند، که به وسیله آن می توانید در اسلایدر به سمت جلو رفته و عکس های بعدی را مشاهده کنید.
کلاس carousel-control-Prev-icon
به همراه کلاس carousel-control-Prev برای ایجاد دکمه یا آیکون قبلی در اسلایدر استفاده می شود.
کلاس carousel-control-next-icon
به همراه کلاس carousel-control-next، برای ایجاد دکمه یا آیکون بعدی (next) در اسلایدر استفاده می شود.
کلاس carousel-Caption
یک عنوان یا caption برای اسلایدر تعیین می کند.
کلاس slide
این کلاس، یک حالت افکت انیمیشن یا CSS transition (ظاهر و محو شدن تدریجی و آرام) را در هنگام تعویض عکس اسلایدر و رفتن از یک عکس به عکس دیگر، به اسلایدر می دهد. اگر از این افکت خوشتان نمی آید، می توانید کلاس آن را حذف کنید.

آموزش کار با اسلایدر توسط خاصیت data Attributes :

از خاصیت های data-* نیز می توانید جهت کار با اسلایدر، استفاده کنید.

خاصیت data-ride برابر carousel، باعث فعال شدن اسلایدر می شود.

همچنین از خواص data-slide و data-slide-to، برای تعیین این که اسلایدر به کجا برود، استفاده می شود. خاصیت data-slide دو مقدار دریافت می کند، “prev” یا “next”، در حالی که برای خاصیت data-slide-to بایستی عدد (شماره عکس در اسلاید) را تعیین نمایید.

مثال : در کد مثال عملی زیر، از خاصیت های فوق در اسلایدر استفاده کرده ایم :

آموزش کار با اسلایدر توسط جاوا اسکریپت:

در کد جاوا اسکریپت زیر، نحوه ایجاد اسلایدر و تعیین دکمه های جلو/عقب رفتن را نشان داده ایم :

مثال 2

// Activate Carousel
$("#myCarousel").carousel();

// Enable Carousel Indicators
$(".item").click(function(){
  $("#myCarousel").carousel(1);
});

// Enable Carousel Controls
$(".carousel-control-prev").click(function(){
  $("#myCarousel").carousel("prev");
});
امتحان کنید

آموزش ویژگی ها (options) اسلایدر در بوت استرپ 4:

می توانید ویژگی ها (options) را از طریق جاوا اسکریپت یا خواص data attributes به اسلایدر اعمال کنید. جهت استفاده از data attributes بایستی نام ویژگی یا option را به خاصیت data- اضافه کنید، مثل data-interval.

در جدول زیر، انواع ویژگی (option) اسلایدر در بوت استرپ 4، به همراه توضیحات، مقادیر مورد استفاده و نوع را نشان داده ایم :

نام
نوع
مقدار پیش فرض
توضیحات
interval (وقفه)
عدد (number) یا مقدار true یا false
5000
میزان تأخیر (وقفه) بین نمایش در اسلاید را به میلی ثانیه تعیین می کند. اگر مقدار interval را بر روی false تنظیم کنید، حرکت خودکار اسلایدرها متوقف شده و به صورت دستی بایستی عوض شوند.
keyboard (صفحه کلید)
مقدار boolean درست true یا false
درست true
تعیین می کند آیا اسلایدر بایستی به رویدادهای کیبورد، واکنش نشان دهد یا خیر.
  • مقدار true : اسلایدر با دکمه های جلو (next) و عقب (previous) صفحه کلید به جلو و عقب می رود.
  • مقدار false :اسلایدر به زدن دکمه های کیبورد واکنشی نداشته و با دکمه های عقب و جلو آن، عکس هایش عوض نمی شود.
pause (استپ)
متنی (string) یا مقدار false
hover
حرکت اسلایدر جلو و عقب را در هنگام عبور موس از روی آن متوقف کرده و با خارج شدن موس از روی اسلایدر، مجددا حرکت شروع می شود. اگر مقدار این خاصیت بر روی false، تنظیم شود، دیگر به عبور موس از روی آن، واکنشی نخواهد داشت.
wrap
درست یا غلط (Boolean)
درست true
خاصیت wrap تعیین می کند آیا اسلایدر بایستی مداوم عکس ها را نشان داده و با رسیدن به عکس آخر، به اول برگردد یا با رسیدن به عکس آخر، حرکت ش متوقف شود.
اگر روی true تنظیم شود، به صورت پیوسته ادامه دارد و اگر بر روی false تنظیم شود، با رسیدن به عکس آخر، متوقف می شود.

آموزش کار با متدها (Methods) اسلایدر carousel :

در جدول زیر، کلیه متدهای اسلایدر carousel در بوت استرپ 4 و توضیح آن ها را نمایش داده ایم :

کلاس
توضیحات
متد carousel(option)
اسلایدر یا carousel را بر حسب گزینه option تعیین شده برای آن، فعال می کند. در ادامه جدول، انواع این گزینه ها و نتیجه آن را بررسی کرده ایم.
متد carousel(“cycle”)
در این حالت، اسلایدر عکس های خود را به ترتیب از چپ به راست نمایش می دهد.
متد carousel(“pause”)
حرکت و نمایش اسلایدها در اسلایدر را متوقف می کند.
متد carousel(“number”)
اسلایدر به آیتم اشاره شده می رود (مقدار شروع 0 است، آیتم اول می شود 0 و به ترتیب 1 و 2 و ...).
متد carousel(“prev”)
اسلایدر به عکس قبلی می رود.
متد carousel(“next”)
اسلایدر به عکس بعدی می رود.
متد carousel(“dispose”)
این متد، اسلایدر موجود را در صفحه از بین می برد.

آموزش کار با رویدادها (Events) اسلایدر :

در جدول زیر، لیست رویدادهای اسلایدر carousel را معرفی کرده ایم :

رویداد
توضیحات
رویداد slide.bs.carousel
زمانی که اسلایدر از یک اسلاید به اسلاید دیگر می رود، رخ می دهد.
رویداد slid.bs.carousel
زمانی که اسلایدر عملیات رفتن از یک اسلاید به اسلاید بعدی را تمام می کند، رخ می دهد.

رویدادهای slid و slide خواص (Properties) اضافه زیر را دارا هستند :

خاصیت
توضیحات
خاصیت direction
جهت حرکت اسلاید را بر می گرداند (جلو یا عقب رفتن).
خاصیت relatedTarget
این خاصیت اطلاعات شی DOM ی که آماده نمایش داده شدن در اسلایدر به عنوان آیتم عنوان است را بر می گرداند.
خاصیت form
این خاصیت، ایندکس عکس یا اسلاید قبلی را در هنگام نمایش یک اسلاید، بر می گرداند.
خاصیت To
این خاصیت، ایندکس آیتم یا اسلاید بعدی که قرار است نمایش داده شود را بر می گرداند.
  • 78
  •    44
  • تاریخ ارسال :   1398/08/21

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

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

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .