BS5 karusel
Karusel / slayd-shou
Karusel — elementlarni navbat bilan almashtirib ko‘rsatadigan slayd-shou:
Karusel qanday yaratiladi
Quyidagi misolda indikatorlar va boshqaruv tugmalariga ega oddiy karuselni qanday yaratish ko‘rsatilgan:
Misol
<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
<!-- Indicators/dots -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
</div>
<!-- The slideshow/carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg" alt="Los Angeles" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="chicago.jpg" alt="Chicago" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="ny.jpg" alt="New York" class="d-block w-100">
</div>
</div>
<!-- Left and right controls/icons -->
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
O‘zingiz sinab ko‘ring »
Misol tahlili
Yuqoridagi misoldagi har bir klass nima qilishining tavsifi:
| 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 |
.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 |
Slaydlarga izohlar (caption) qo‘shish
Los Angeles
We had such a great time in LA!
Chicago
Thank you, Chicago!
New York
We love the Big Apple!
Har bir slaydga izoh yaratish uchun har bir <div
class="carousel-item"> ichidagi <div class="carousel-caption"> ga elementlar qo‘shing:
Misol
<div class="carousel-item">
<img src="la.jpg" alt="Los Angeles">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!