JS karusel

JS Carousel (carousel.js)

Carousel plagini — elementlarni karusel (slayd-shou) kabi navbatma-navbat almashtirib ko‘rsatish uchun mo‘ljallangan komponent.

Karusellar bo‘yicha darslik uchun Bootstrap karusel darsligimizni o‘qing.

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 plagini klasslari

Klass	Tavsif
.carousel	Karusel yaratadi
.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
.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
.icon-next	Karusellarda ishlatiladigan Unicode belgi (o‘ngga yo‘nalgan strelka). Ko‘pincha glyphicon o‘rniga ishlatiladi
.icon-prev	Karusellarda ishlatiladigan Unicode belgi (chapga yo‘nalgan strelka). Ko‘pincha glyphicon o‘rniga ishlatiladi
.item	Har bir slayd kontentini belgilaydi
.left carousel-control	Karuselga chap tugma qo‘shadi, u foydalanuvchiga slaydlar bo‘ylab orqaga qaytish imkonini beradi
.right carousel-control	Karuselga o‘ng tugma qo‘shadi, u foydalanuvchiga slaydlar bo‘ylab oldinga o‘tish imkonini beradi
.carousel-caption	Karusel uchun izoh matnini (caption) belgilaydi

data-* atributlari orqali

data-ride="carousel" atributi karuselni faollashtiradi.

data-slide va data-slide-to atributlari qaysi slaydga o‘tish kerakligini belgilaydi.

data-slide atributi ikkita qiymat qabul qiladi: prev yoki next, data-slide-to esa sonlarni qabul qiladi.

Misol

<div id="myCarousel" class="carousel slide" data-ride="carousel">  <li data-target="#myCarousel" data-slide-to="1"></li>  <a class="left carousel-control" href="#myCarousel" data-slide="prev">

O‘zingiz sinab ko‘ring »

JavaScript orqali

Qo‘lda quyidagicha yoqing:

Misol

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

O‘zingiz sinab ko‘ring »

Karusel parametrlari

Parametrlarni data atributlari yoki JavaScript orqali uzatish mumkin. Data atributlari uchun parametr nomini data- ga qo‘shing, masalan: data-interval="".

Nomi	Tipi	Default	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 orqali data orqali
pause	string yoki boolean false	"hover"	Sichqoncha kursori karusel ustiga kirganda karuselning keyingi slaydga o‘tishini to‘xtatib turadi va kursor karuseldan chiqqanda slaydlar almashishini davom ettiradi Eslatma: Sichqoncha ustiga olib borilganda to‘xtash imkoniyatini o‘chirish uchun pause qiymatini false ga o‘rnating	JS orqali data orqali
wrap	boolean	true	Karusel barcha slaydlar bo‘ylab uzluksiz aylanishi yoki oxirgi slaydda to‘xtashi kerakligini belgilaydi true - uzluksiz aylanadi false - oxirgi elementda to‘xtaydi	JS orqali data orqali

Karusel metodlari

Quyidagi jadvalda barcha mavjud karusel 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 elementlari bo‘ylab chapdan o‘ngga aylanadi	Sinab ko‘ring
.carousel("pause")	Karuselning elementlar bo‘ylab aylanishini to‘xtatadi	Sinab ko‘ring
.carousel(number)	Belgilangan elementga o‘tadi (nomerlash 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

Karusel hodisalari

Quyidagi jadvalda barcha mavjud karusel hodisalari keltirilgan.

Hodisa	Tavsif	Sinab ko‘ring
slide.bs.carousel	Karusel bir elementdan boshqasiga o‘tish arafasida bo‘lganda sodir bo‘ladi	Sinab ko‘ring
slid.bs.carousel	Karusel bir elementdan boshqasiga o‘tishni tugatganda sodir bo‘ladi	Sinab ko‘ring

Ko‘proq misollar

Slaydlarga izoh matnlari (caption)

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">  <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> <li data-target="#myCarousel" data-slide-to="3"></li> </ol>  <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="img_chania.jpg" alt="Chania"> <div class="carousel-caption"> <h3>Chania</h3> <p>The atmosphere in Chania has a touch of Florence and Venice.</p> </div> </div> <div class="item"> <img src="img_chania2.jpg" alt="Chania"> <div class="carousel-caption"> <h3>Chania</h3> <p>The atmosphere in Chania has a touch of Florence and Venice.</p> </div> </div> <div class="item"> <img src="img_flower.jpg" alt="Flower"> <div class="carousel-caption"> <h3>Flowers</h3> <p>Beautiful flowers in Kolymbari, Crete.</p> </div> </div> <div class="item"> <img src="img_flower2.jpg" alt="Flower"> <div class="carousel-caption"> <h3>Flowers</h3> <p>Beautiful flowers in Kolymbari, Crete.</p> </div> </div> </div>  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>

O‘zingiz sinab ko‘ring »

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish