Source

Karusel

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

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.

Nihoyat, agarutil.js siz JavaScript-ni manbadan yaratayotgan bo'lsangiz, u .

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. Bundan tashqari, ixtiyoriy boshqaruv elementlari uchun noyob identifikatorni o'rnatishni unutmang .carousel, ayniqsa bitta sahifada bir nechta karuseldan foydalansangiz. Boshqarish va indikator elementlari element identifikatoriga mos keladigan atributga data-target(yoki havolalar uchun) ega bo'lishi kerak .href.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

<div id="carouselExampleSlidesOnly" class="carousel slide" data-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 elementlariga qo'shish:

<div id="carouselExampleControls" class="carousel slide" data-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>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Ko'rsatkichlar bilan

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

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <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>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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.

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <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>Nulla vitae elit libero, a pharetra augue mollis interdum.</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Crossfade

.carousel-fadeSlayd oʻrniga oʻzgaruvchan oʻtish bilan slaydlarni jonlantirish uchun karuselingizga qoʻshing .

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-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>
  <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

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

<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-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>
  <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Foydalanish

Ma'lumotlar atributlari orqali

Karusel o'rnini osongina boshqarish uchun ma'lumotlar atributlaridan foydalaning. yoki data-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-slide-todata-slide-to="2"0

data-ride="carousel"Atribut karuselni sahifa yuklanishidan boshlab animatsiya sifatida belgilash uchun ishlatiladi . Agar siz data-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:

$('.carousel').carousel()

Variantlar

Variantlar ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-kabi qoʻshing data-interval="".

Ism Turi Standart Tavsif
interval raqam 5000 Ob'ektni avtomatik aylantirish o'rtasidagi kechikish vaqti. Agar noto'g'ri bo'lsa, karusel avtomatik ravishda aylanmaydi.
klaviatura mantiqiy rost Karusel klaviatura hodisalariga munosabat bildirishi kerakmi.
pauza string | mantiqiy "ko'chirish"

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). E'tibor bering, bu sichqonchaning yuqoridagi xatti-harakatlariga qo'shimcha.
minish ip yolg'on Foydalanuvchi birinchi elementni qo'lda aylantirgandan so'ng, karuselni avtomatik ijro etadi. Agar "karusel" bo'lsa, karusel yuklanganda avtomatik o'ynaydi.
o'rash mantiqiy rost Karusel doimiy ravishda aylanishi kerakmi yoki qattiq to'xtashlari kerakmi.
teginish mantiqiy rost Karusel sensorli ekranli qurilmalarda chap/o‘ngga surish harakatlarini qo‘llab-quvvatlashi 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 .

.carousel(options)

Karuselni ixtiyoriy variantlar objectbilan ishga tushiradi va ob'ektlar bo'ylab aylana boshlaydi.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

Karusel elementlarini chapdan o'ngga aylantiring.

.carousel('pause')

Karuselning ob'ektlar orasidan aylanishini to'xtatadi.

.carousel(number)

Karuselni ma'lum bir freymga aylantiradi (0-ga asoslangan, massivga o'xshash). Maqsadli element ko'rsatilishidan oldin (ya'ni voqea sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi .slid.bs.carousel

.carousel('prev')

Oldingi elementga aylanish. Oldingi element ko'rsatilishidan oldin (ya'ni voqea sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi .slid.bs.carousel

.carousel('next')

Keyingi elementga o'tish. Keyingi element ko'rsatilgunga qadar (ya'ni slid.bs.carouselvoqea sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi.

.carousel('dispose')

Elementning karuselini yo'q qiladi.

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
slayd.bs.karusel Bu hodisa slidemisol usuli chaqirilganda darhol ishga tushadi.
slid.bs.carusel Ushbu hodisa karusel slaydga o'tishni tugatgandan so'ng o'chiriladi. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

O'tish muddatini o'zgartiring

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-transitionAgar bir nechta o'tish qo'llanilsa, avval transformatsiya o'tishi aniqlanganligiga ishonch hosil qiling (masalan, transition: transform 2s ease, opacity .5s ease-out).