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.

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 class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
</div>

Boshqaruv bilan

Oldingi va keyingi boshqaruv elementlariga qo'shish:

Oldingi Keyingisi

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </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.

Oldingi Keyingisi

<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 class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </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.

Birinchi slayd yorlig'i

Nulla vitae elit libero, a pharetra augue mollis interdum.

Ikkinchi slayd yorlig'i

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Uchinchi slayd yorlig'i

To'g'ridan-to'g'ri commodo cursus magna, scelerisque nisl consectetur.

Oldingi Keyingisi

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

Crossfade

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

Oldingi Keyingisi

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </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>

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 . 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="".

Usullari

.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.

$('#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).