BS karusel
Carousel plagini
Carousel plagini — elementlarni karusel (slayd-shou) kabi navbatma-navbat almashtirib ko‘rsatish uchun mo‘ljallangan komponent.
Maslahat: Plaginlarni alohida (Bootstrap’ning alohida "carousel.js" faylidan foydalanib) yoki hammasini birdaniga ("bootstrap.js" yoki "bootstrap.min.js" orqali) ulash mumkin.
Karusel misoli
Eslatma: Karusellar Internet Explorer 9 va undan oldingi versiyalarda to‘g‘ri qo‘llab-quvvatlanmaydi (chunki ular slayd effektiga erishish uchun CSS3 o‘tishlari (transitions) va animatsiyalaridan foydalanadi).
Karusel qanday yaratiladi
Quyidagi misolda oddiy karuselni qanday yaratish ko‘rsatilgan:
Misol
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="la.jpg" alt="Los Angeles">
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago">
</div>
<div class="item">
<img src="ny.jpg" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
O‘zingiz sinab ko‘ring »
Misol tahlili
Eng tashqi <div>:
Karusel boshqaruv elementlari to‘g‘ri ishlashi uchun karuselga id (bu misolda id="myCarousel") berilishi shart.
class="carousel" bu <div> karuselni o‘z ichiga olganini bildiradi.
.slide klassi CSS o‘tish (transition) va animatsiya effektini qo‘shadi, natijada yangi element ko‘rsatilganda elementlar siljib almashadi. Agar bu effektni istamasangiz, ushbu klassni qo‘shmang.
data-ride="carousel" atributi Bootstrap’ga sahifa yuklanishi bilanoq karusel animatsiyasini boshlashni bildiradi.
"Indikatorlar" qismi:
Indikatorlar — har bir slayd pastidagi kichik nuqtalar (ular karuselda nechta slayd borligini va foydalanuvchi hozir qaysi slaydni ko‘rayotganini bildiradi).
Indikatorlar .carousel-indicators klassiga ega tartiblangan ro‘yxatda belgilanadi.
data-target atributi karuselning id’siga ishora qiladi.
data-slide-to atributi muayyan nuqta bosilganda qaysi slaydga o‘tishni belgilaydi.
"Slaydlar o‘ramasi" (wrapper for slides) qismi:
Slaydlar .carousel-inner klassiga ega <div> ichida belgilanadi.
Har bir slaydning kontenti .item klassiga ega <div> ichida belgilanadi. Bu matn yoki rasm bo‘lishi mumkin.
.active klassi slaydlardan biriga qo‘shilishi kerak. Aks holda karusel ko‘rinmaydi.
"Chap va o‘ng boshqaruv elementlari" qismi:
Bu kod foydalanuvchiga slaydlar orasida qo‘lda oldinga va orqaga o‘tish imkonini beruvchi "chap" va "o‘ng" tugmalarini qo‘shadi.
data-slide atributi "prev" yoki "next" kalit so‘zlarini qabul qiladi, ular slayd o‘rnini joriy holatiga nisbatan o‘zgartiradi.
Slaydlarga izohlar (caption) qo‘shish
Har bir slayd uchun izoh (caption) yaratish uchun har bir <div
class="item"> ichiga <div class="carousel-caption"> ni qo‘shing:
Misol
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="la.jpg" alt="Chania">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>LA is always so much fun!</p>
</div>
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="item">
<img src="ny.jpg" alt="New York">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
O‘zingiz sinab ko‘ring »
Bootstrap karuseli bo‘yicha to‘liq ma’lumotnoma
Karuselning barcha parametrlari (options), metodlari va hodisalari (events) bo‘yicha to‘liq ma’lumot uchun Bootstrap JS Carousel ma’lumotnomamizga o‘ting.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!