JS Carousel
Carousel CSS klasslari
Karusellar haqidagi darslik uchun Bootstrap karusel darsligimizni o‘qing.
| Klass | Tavsif |
|---|---|
.carousel |
Karusel yaratadi |
.carousel-indicators |
Karuselga indikatorlar qo‘shadi. Bular har bir slayd pastidagi kichik nuqtalar (ular karuselda nechta slayd borligini va foydalanuvchi hozir qaysi slaydni ko‘rayotganini bildiradi) |
.carousel-inner |
Karuselga slaydlar qo‘shadi |
.carousel-item |
Har bir slayd kontentini belgilaydi |
.carousel-control-prev |
Karuselga chap (oldingi) tugmani qo‘shadi — u foydalanuvchiga slaydlar bo‘ylab orqaga qaytish imkonini beradi |
.carousel-control-next |
Karuselga o‘ng (keyingi) tugmani qo‘shadi — u foydalanuvchiga slaydlar bo‘ylab oldinga o‘tish imkonini beradi |
.carousel-control-prev-icon |
"Oldingi" tugmasini yaratish uchun .carousel-control-prev bilan birga ishlatiladi |
.carousel-control-next-icon |
"Keyingi" tugmasini yaratish uchun .carousel-control-next bilan birga ishlatiladi |
.carousel-caption |
Karusel uchun izoh (caption) belgilaydi |
.slide |
Bir elementdan keyingisiga o‘tishda CSS o‘tish (transition) va animatsiya effektini qo‘shadi. Agar bu effekt kerak bo‘lmasa, ushbu klassni olib tashlang |
data-* atributlari orqali
data-ride="carousel" atributi karuselni faollashtiradi.
data-slide va data-slide-to atributlari qaysi slaydga o‘tishni belgilaydi.
data-slide atributi ikkita qiymat qabul qiladi: prev yoki next, data-slide-to esa sonlarni qabul qiladi.
Misol
<!-- Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel Indicators -->
<li data-target="#myCarousel" data-slide-to="1"></li>
<!-- Carousel Controls -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
O‘zingiz sinab ko‘ring »
JavaScript orqali
Qo‘lda faollashtirish uchun:
Misol
// Activate Carousel
$("#myCarousel").carousel();
// Enable Carousel Indicators
$(".item").click(function(){
$("#myCarousel").carousel(1);
});
// Enable Carousel Controls
$(".carousel-control-prev").click(function(){
$("#myCarousel").carousel("prev");
});
O‘zingiz sinab ko‘ring »
Carousel parametrlari (options)
Parametrlarni data atributlari yoki JavaScript orqali uzatish mumkin. Data atributlari uchun parametr nomini data- ga qo‘shing, masalan, data-interval="".
| Nomi | Turi | Standart | Tavsif | Sinab ko‘ring |
|---|---|---|---|---|
| interval | number yoki boolean false | 5000 | Har bir slayd orasidagi kechikishni (millisekundlarda) belgilaydi. Eslatma: Elementlarning avtomatik almashishini to‘xtatish uchun interval qiymatini false ga o‘rnating |
JS yordamida data yordamida |
| keyboard | boolean | true | Karusel klaviatura hodisalariga javob berishi kerakligini belgilaydi:
|
JS yordamida data yordamida |
| pause | string yoki boolean false | "hover" | Sichqoncha kursori karusel ustiga kelganda karuselning keyingi slaydga o‘tishini to‘xtatib turadi va kursor karuseldan chiqqanda slaydlarni almashtirishni davom ettiradi Eslatma: Hover paytida to‘xtatib turish imkoniyatini o‘chirish uchun pause qiymatini false ga o‘rnating |
JS yordamida data yordamida |
| wrap | boolean | true | Karusel barcha slaydlar bo‘ylab uzluksiz aylanishi yoki oxirgi slaydda to‘xtashini belgilaydi
|
JS yordamida data yordamida |
Carousel metodlari
Quyidagi jadvalda barcha mavjud carousel metodlari keltirilgan.
| Metod | Tavsif | Sinab ko‘ring |
|---|---|---|
| .carousel(options) | Karuselni parametr bilan faollashtiradi. Yaroqli qiymatlar uchun yuqoridagi parametrlarga qarang | Sinab ko‘ring |
| .carousel("cycle") | Karusel elementlarini chapdan o‘ngga aylantirib chiqadi | Sinab ko‘ring |
| .carousel("pause") | Karuselning elementlar bo‘ylab aylanishini to‘xtatadi | Sinab ko‘ring |
| .carousel(number) | Ko‘rsatilgan elementga o‘tadi (hisob noldan boshlanadi: birinchi element 0, ikkinchi element 1 va h.k.) | Sinab ko‘ring |
| .carousel("prev") | Oldingi elementga o‘tadi | Sinab ko‘ring |
| .carousel("next") | Keyingi elementga o‘tadi | Sinab ko‘ring |
| .carousel("dispose") | Karuselni yo‘q qiladi |
Carousel hodisalari (events)
Quyidagi jadvalda barcha mavjud carousel hodisalari keltirilgan.
| Hodisa | Tavsif | Sinab ko‘ring |
|---|---|---|
| slide.bs.carousel | Karusel bir elementdan boshqasiga o‘tish arafasida yuz beradi | Sinab ko‘ring |
| slid.bs.carousel | Karusel bir elementdan boshqasiga o‘tishni tugatganda yuz beradi | Sinab ko‘ring |
slid va slide hodisalari qo‘shimcha xususiyatlarga ham ega:
| Xususiyat | Tavsif | Sinab ko‘ring |
|---|---|---|
| direction | Karusel qaysi yo‘nalishda (chapga yoki o‘ngga) o‘tayotganini qaytaradi | |
| relatedTarget | Faol element sifatida o‘z joyiga surilayotgan DOM elementini qaytaradi | Sinab ko‘ring |
| from | Keyingisiga o‘tilayotganda oldingi element qaysi indeksdan kelganini qaytaradi | Sinab ko‘ring |
| to | Keyingi elementning indeksini qaytaradi | Sinab ko‘ring |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!