Asosiy tarkibga o'tish Hujjatlar navigatsiyasiga oʻtish
Check
in English

Karusel

Slayd-shou komponenti, masalan, karusel kabi elementlar, tasvirlar yoki matn slaydlari bo'ylab harakatlanish uchun.

Ushbu sahifada

U qanday ishlaydi

Karusel - bu CSS 3D o'zgarishlari va biroz JavaScript-dan foydalangan holda yaratilgan bir qator kontentlar bo'ylab harakatlanish uchun slayd-shou. U bir qator rasmlar, matn yoki maxsus belgilar bilan ishlaydi. Shuningdek, u oldingi/keyingi boshqaruv va ko'rsatkichlarni qo'llab-quvvatlashni o'z ichiga oladi.

Page Visibility API qo'llab-quvvatlanadigan brauzerlarda veb-sahifa foydalanuvchiga ko'rinmasa (masalan, brauzer yorlig'i faol bo'lmaganda, brauzer oynasi kichraytirilganda va hokazo) karusel sirpanishdan saqlaydi.

Ushbu komponentning animatsiya effekti prefers-reduced-motionmedia so'roviga bog'liq. Maxsus imkoniyatlar hujjatlarimizning qisqartirilgan harakat bo'limiga qarang .

Iltimos, shuni yodda tutingki, ichki o'rnatilgan karusellar qo'llab-quvvatlanmaydi va karusellar odatda mavjudlik standartlariga mos kelmaydi.

Misol

Karusellar slayd o'lchamlarini avtomatik ravishda normallashtirmaydi. Shunday qilib, kontentni mos ravishda o'lchash uchun qo'shimcha yordam dasturlari yoki maxsus uslublardan foydalanishingiz kerak bo'lishi mumkin. Karusellar oldingi/keyingi boshqaruv va ko'rsatkichlarni qo'llab-quvvatlasa-da, ular aniq talab qilinmaydi. O'zingizga mos keladigan tarzda qo'shing va sozlang.

Sinfni .activeslaydlardan biriga qo'shish kerak, aks holda karusel ko'rinmaydi. idBundan tashqari, ixtiyoriy boshqaruv elementlari uchun noyobni o'rnatganingizga ishonch hosil .carouselqiling, ayniqsa bitta sahifada bir nechta karuseldan foydalansangiz. Boshqaruv va ko'rsatkich elementlari elementga mos keladigan atributga data-bs-target(yoki hrefhavolalar uchun) ega bo'lishi kerak .id.carousel

Faqat slaydlar

Bu yerda faqat slaydlar bilan karusel. Brauzerda standart tasvirni hizalanishini oldini olish uchun karusel tasvirlarining .d-blockmavjudligiga e'tibor bering ..w-100

html 
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

Boshqaruv bilan

Oldingi va keyingi boshqaruv elementlarini qo'shish. Elementlardan foydalanishni tavsiya qilamiz <button>, lekin siz <a>bilan elementlardan ham foydalanishingiz mumkin role="button".

html 
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Ko'rsatkichlar bilan

Bundan tashqari, karuselga boshqaruv elementlari bilan bir qatorda ko'rsatkichlarni ham qo'shishingiz mumkin.

html 
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Sarlavhalar bilan

.carousel-captionHar qanday element ichidagi element bilan slaydlaringizga osongina sarlavha qo'shing .carousel-item. Ular quyida ko'rsatilganidek, ixtiyoriy displey yordam dasturlari bilan kichikroq ko'rish oynalarida osongina yashirilishi mumkin . Biz ularni dastlab bilan yashiramiz .d-noneva o'rta o'lchamdagi qurilmalarga qaytaramiz .d-md-block.

html 
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Crossfade

.carousel-fadeSlayd oʻrniga oʻzgaruvchan oʻtish bilan slaydlarni jonlantirish uchun karuselingizga qoʻshing . Karusel tarkibiga (masalan, faqat matnli slaydlar) qarab, to'g'ri kesishish uchun s .bg-body-ga yoki ba'zi maxsus CSS qo'shishingiz mumkin..carousel-item

html 
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Keyingi elementga avtomatik oʻtish oʻrtasidagi kechikish vaqtini oʻzgartirish data-bs-interval=""uchun a ga qoʻshing ..carousel-item

html 
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Sensorli surishni o‘chirib qo‘ying

Karusellar slaydlar orasida harakat qilish uchun sensorli ekranli qurilmalarda chapga/o‘ngga surishni qo‘llab-quvvatlaydi. data-bs-touchBu atribut yordamida o'chirib qo'yilishi mumkin . Quyidagi misolda ham data-bs-rideatribut mavjud emas, shuning uchun u avtomatik ijro etilmaydi.

html 
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Qorong'i variant

Qorong'i boshqaruvlar, ko'rsatkichlar va taglavhalar uchun .carousel-darkqo'shing . Boshqaruv elementlari CSS xususiyati .carouselbilan birlamchi oq to'ldirishdan o'zgartirildi . Sarlavhalar va boshqaruv elementlarida va filterni sozlaydigan qo'shimcha Sass o'zgaruvchilari mavjud .colorbackground-color

html 
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Shaxsiy o'tish

O'tish muddati kompilyatsiya qilishdan oldin Sass o'zgaruvchisi yoki agar siz kompilyatsiya qilingan CSS dan foydalanayotgan bo'lsangiz, maxsus uslublar .carousel-itembilan o'zgartirilishi mumkin . $carousel-transition-durationAgar bir nechta o'tish qo'llanilsa, avval transformatsiya o'tishi aniqlanganligiga ishonch hosil qiling (masalan, transition: transform 2s ease, opacity .5s ease-out).

Sass

O'zgaruvchilar

Barcha karusellar uchun o'zgaruvchilar:

$carousel-control-color:             $white;
$carousel-control-width:             15%;
$carousel-control-opacity:           .5;
$carousel-control-hover-opacity:     .9;
$carousel-control-transition:        opacity .15s ease;

$carousel-indicator-width:           30px;
$carousel-indicator-height:          3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:          3px;
$carousel-indicator-opacity:         .5;
$carousel-indicator-active-bg:       $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:      opacity .6s ease;

$carousel-caption-width:             70%;
$carousel-caption-color:             $white;
$carousel-caption-padding-y:         1.25rem;
$carousel-caption-spacer:            1.25rem;

$carousel-control-icon-width:        2rem;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");

$carousel-transition-duration:       .6s;
$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

Qorong'i karusel uchun o'zgaruvchilar :

$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

Foydalanish

Ma'lumotlar atributlari orqali

Karusel o'rnini osongina boshqarish uchun ma'lumotlar atributlaridan foydalaning. yoki data-bs-slidekalit so'zlarini qabul qiladi , bu esa slaydni joriy holatiga nisbatan o'zgartiradi. Shu bilan bir qatorda, slayd o'rnini bilan boshlangan ma'lum bir indeksga o'tkazadigan karuselga xom slayd indeksini o'tkazish uchun foydalaning .prevnextdata-bs-slide-todata-bs-slide-to="2"0

data-bs-ride="carousel"Atribut karuselni sahifa yuklanishidan boshlab animatsiya sifatida belgilash uchun ishlatiladi . Agar siz data-bs-ride="carousel"karuselni ishga tushirish uchun foydalanmasangiz, uni o'zingiz ishga tushirishingiz kerak. Uni bir xil karuselning aniq JavaScript ishga tushirishi (ortiqcha va keraksiz) bilan birgalikda ishlatib bo'lmaydi.

JavaScript orqali

Karuselga qo'lda qo'ng'iroq qiling:

const carousel = new bootstrap.Carousel('#myCarousel')

Variantlar

data-bs-Variantlar ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkinligi sababli , ga variant nomini qo'shishingiz mumkin data-bs-animation="{value}". Variantlarni maʼlumotlar atributlari orqali oʻtkazishda variant nomining registr turini “ camelCase ” dan “ kabob-case ” ga oʻzgartirganingizga ishonch hosil qiling. Masalan, data-bs-custom-class="beautifier"o'rniga foydalaning data-bs-customClass="beautifier".

Bootstrap 5.2.0 dan boshlab barcha komponentlar JSON qatori sifatida oddiy komponent konfiguratsiyasini joylashtirishi mumkin bo‘lgan eksperimental zaxiralangan ma’lumotlar atributini qo‘llab-quvvatlaydi. data-bs-configElement data-bs-config='{"delay":0, "title":123}'va data-bs-title="456"atributlariga ega bo'lsa, yakuniy titleqiymat bo'ladi 456va alohida ma'lumotlar atributlari ga berilgan qiymatlarni bekor qiladi data-bs-config. Bundan tashqari, mavjud ma'lumotlar atributlari kabi JSON qiymatlarini joylashtirishi mumkin data-bs-delay='{"show":0,"hide":150}'.

Ism Turi Standart Tavsif
interval raqam 5000 Ob'ektni avtomatik aylantirish o'rtasidagi kechikish vaqti.
keyboard mantiqiy true Karusel klaviatura hodisalariga munosabat bildirishi kerakmi.
pause string, mantiqiy "hover" ga o'rnatilgan bo'lsa "hover", karuselning aylanishini to'xtatib turadi va karuselning mouseenteraylanishini davom ettiradi mouseleave. Agar ga oʻrnatilgan boʻlsa false, kursorni karusel ustiga olib borish uni toʻxtatib qoʻymaydi. Sensorli qurilmalarda, ga o‘rnatilgan bo‘lsa "hover", velosipedda harakatlanish avtomatik ravishda davom etishdan oldin ikki oraliq uchun to‘xtatiladi touchend(foydalanuvchi karusel bilan aloqani tugatgandan so‘ng). Bu sichqonchaning xatti-harakatiga qo'shimcha.
ride string, mantiqiy false ga o‘rnatilgan bo‘lsa true, foydalanuvchi birinchi elementni qo‘lda aylantirgandan so‘ng, karuselni avtomatik o‘ynatadi. ga oʻrnatilgan boʻlsa "carousel", yuklanganda karuselni avtomatik oʻynaydi.
touch mantiqiy true Karusel sensorli ekranli qurilmalarda chap/o‘ngga surish harakatlarini qo‘llab-quvvatlashi kerakmi.
wrap mantiqiy true Karusel doimiy ravishda aylanishi kerakmi yoki qattiq to'xtashlari kerakmi.

Usullari

Asinxron usullar va o'tishlar

Barcha API usullari asenkron va o'tishni boshlaydi . O'tish boshlanishi bilanoq, lekin tugashidan oldin ular qo'ng'iroq qiluvchiga qaytadilar . Bundan tashqari, o'tish komponentidagi usul chaqiruvi e'tiborga olinmaydi .

Qo'shimcha ma'lumot olish uchun bizning JavaScript hujjatlariga qarang .

Siz karusel konstruktori yordamida karusel misolini yaratishingiz mumkin, masalan, qo'shimcha opsiyalarni ishga tushirish va elementlar bo'ylab aylanishni boshlash:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
Usul Tavsif
cycle Karusel elementlarini chapdan o'ngga aylantiring.
dispose Elementning karuselini yo'q qiladi. (DOM elementida saqlangan ma'lumotlarni o'chiradi)
getInstance DOM elementi bilan bog'langan karusel misolini olish imkonini beruvchi statik usul, uni quyidagicha ishlatishingiz mumkin: bootstrap.Carousel.getInstance(element).
getOrCreateInstance DOM elementiga bog'langan karusel misolini qaytaradigan yoki ishga tushirilmagan bo'lsa, yangisini yaratadigan statik usul. Siz undan shunday foydalanishingiz mumkin: bootstrap.Carousel.getOrCreateInstance(element).
next Keyingi elementga o'tish. Keyingi element ko'rsatilishidan oldin (masalan, voqea sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi .slid.bs.carousel
nextWhenVisible Sahifa ko'rinmasa yoki karusel yoki uning ota-onasi ko'rinmasa, karuseldan keyingisiga o'tmang. Maqsadli element ko'rsatilishidan oldin qo'ng'iroq qiluvchiga qaytadi .
pause Karuselning ob'ektlar orasidan aylanishini to'xtatadi.
prev Oldingi elementga aylanish. Oldingi element ko'rsatilishidan oldin (masalan, voqea sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi .slid.bs.carousel
to Karuselni ma'lum bir freymga aylantiradi (0-ga asoslangan, massivga o'xshash). Maqsadli element ko'rsatilishidan oldin (masalan, voqea sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi .slid.bs.carousel

Voqealar

Bootstrap-ning karusel klassi karusel funksiyasiga ulanish uchun ikkita hodisani ochib beradi. Ikkala hodisa ham quyidagi qo'shimcha xususiyatlarga ega:

  • direction: Karusel siljish yo'nalishi (yoki "left"yoki "right").
  • relatedTarget: Faol element sifatida joyiga surilayotgan DOM elementi.
  • from: Joriy element indeksi
  • to: Keyingi element indeksi

Barcha karusel hodisalari karuselning o'ziga (ya'ni <div class="carousel">) qaratiladi.

Tadbir turi Tavsif
slid.bs.carousel Karusel slaydga o'tishni tugatgandan so'ng ishga tushiriladi.
slide.bs.carousel slideNamuna usuli chaqirilganda darhol yonadi. 
const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})