Esasy mazmuna geçiň Docs nawigasiýasyna geçiň
Check
in English

Karusel

Karusel ýaly elementleriň üsti bilen tigir sürmek üçin slaýdşow komponenti - şekiller ýa-da tekst slaýdlary.

Bu sahypada

Bu nähili işleýär

Karusel, CSS 3D öwrülişikleri we birneme JavaScript bilen gurlan mazmunyň üsti bilen tigir sürmek üçin slaýdşowdyr. Birnäçe suratlar, tekst ýa-da ýörite bellik bilen işleýär. Şeýle hem, öňki / indiki dolandyryşlar we görkezijiler üçin goldawy öz içine alýar.

Page Visibility API goldanýan brauzerlerde , web sahypasy ulanyja görünmeýän mahaly karusel süýşmekden saklanar (meselem, brauzer goýmasy hereketsiz bolanda, brauzer penjiresi kiçeldilýär we ş.m.).

Bu komponentiň animasiýa täsiri prefers-reduced-motionmedia talaplaryna baglydyr. Elýeterlilik resminamalarymyzyň azaldylan hereket bölümine serediň .

Höwürtgelenen karuselleriň goldanylmaýandygyny we karuselleriň adatça elýeterlilik standartlaryna laýyk gelmeýändigini ýadyňyzdan çykarmaň.

Mysal

Karuseller slaýd ölçeglerini awtomatiki kadalaşdyrmaýar. Şeýle bolansoň, mazmuny laýyk ölçemek üçin goşmaça kömekçi enjamlary ýa-da adaty stilleri ulanmagyňyz zerur bolup biler. Karuseller öňki / indiki dolandyryşlary we görkezijileri goldaýan bolsa-da, aç-açan talap edilmeýär. Isleýşiňiz ýaly goşuň we düzüň.

.activeSlaýdlaryň birine synp goşmaly, ýogsam karusel görünmez. Şeýle hem , aýratyn bir sahypada birnäçe karusel ulanýan bolsaňyz, goşmaça dolandyryşlar üçin özboluşly bir zady belläň id. .carouselDolandyryş we görkeziji elementleriň elementiň gabat gelýän aýratynlygy (ýa-da baglanyşyklary üçin ) data-bs-targetbolmaly .hrefid.carousel

Diňe slaýdlar

Ine, diňe slaýdly karusel. Brauzeriň deslapky şekil deňleşmeginiň öňüni almak üçin .d-blockwe karusel şekilleriniň bardygyna üns beriň ..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>

Dolandyryş bilen

Öňki we indiki dolandyryşlara goşmak. Elementleri ulanmagy maslahat berýäris , ýöne elementleri <button>hem ulanyp bilersiňiz .<a>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>

Görkezijiler bilen

Şeýle hem dolandyryş elementleri bilen birlikde karusele görkezijileri goşup bilersiňiz.

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>

Tionsazgylar bilen

Slaýdlaryňyza ýazgylary .carousel-captionislendik element bilen aňsatlyk bilen goşuň .carousel-item. Olary goşmaça görkeziş enjamlary bilen aşakda görkezilişi ýaly kiçi görnüşlerde aňsatlyk bilen gizläp bolýar . Ilki bilen gizleýäris .d-nonewe orta ölçegli enjamlara getirýäris .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>

Haç

.carousel-fadeSlaýdlaryň ýerine dereksiz geçiş bilen slaýdlary janlandyrmak üçin karuseliňize goşuň . Karusel mazmunyňyza baglylykda (meselem, diňe tekst slaýdlary), dogry kesişmek üçin s .bg-body-e käbir CSS goşup bilersiňiz..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>

Indiki elemente awtomatiki welosiped sürmegiň arasynda gijä galmak üçin wagt mukdaryny üýtgetmek üçin data-bs-interval=""goşuň ..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>

Duýgur süýşmegi öçüriň

Karuseller, slaýdlaryň arasynda hereket etmek üçin duýgur ekran enjamlarynda çepe / saga süýşmegi goldaýar. data-bs-touchBu atributdan peýdalanyp öçürilip bilner . Aşakdaky mysal data-bs-ride, awtomatiki görkezilmezligi üçin atributy hem öz içine almaýar.

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>

Garaňky görnüş

Has garaňky dolandyryşlar, görkezijiler we ýazgylar üçin .carousel-darkgoşuň . Dolandyryşlar, CSS häsiýeti .carouselbilen adaty ak doldurgyçdan tersine . Tionsazgylarda we dolandyryşlarda goşmaça we filterSass üýtgeýänleri bar .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>

Hususy geçiş

Geçirilen dowamlylygy Sass üýtgeýjisi .carousel-itembilen $carousel-transition-durationdüzmezden ýa-da düzülen CSS-ni ulanýan bolsaňyz üýtgedip bilersiňiz. Birnäçe geçiş ulanylsa, ilki bilen geçişiň kesgitlenendigine göz ýetiriň (mysal üçin transition: transform 2s ease, opacity .5s ease-out).

Sass

Üýtgeýjiler

Carhli karuseller üçin üýtgeýjiler:

$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`)

Garaňky karusel üçin üýtgeýjiler :

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

Ulanylyşy

Maglumat atributlary arkaly

Karuseliň ýagdaýyny aňsatlyk bilen dolandyrmak üçin maglumat atributlaryny ulanyň. data-bs-slideaçar sözleri kabul edýär prevýa-da nextslaýd ýagdaýyny häzirki ýagdaýyna görä üýtgedýär. Ativea- da bolmasa, slaýd ýagdaýyny başlaýan belli bir görkezijä geçirýän data-bs-slide-toçig slaýd indeksini karusele geçirmek üçin ulanyň .data-bs-slide-to="2"0

Bu data-bs-ride="carousel"atribut, karuseli sahypa ýükünden başlap janlandyryjy hökmünde bellemek üçin ulanylýar. data-bs-ride="carousel"Karuseliňizi başlatmak üçin ulanmasaňyz , ony özüňiz başlamalysyňyz. Şol bir karuseliň aç-açan JavaScript başlangyjy bilen (artykmaç we gereksiz) bilelikde ulanylyp bilinmez.

JavaScript arkaly

Karusel bilen el bilen jaň ediň:

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

Görnüş

Opsiýalary maglumat atributlary ýa-da JavaScript arkaly geçirip bolýandygy sebäpli, opsiýa adyny data-bs-bolşy ýaly goşup bilersiňiz data-bs-animation="{value}". Opsiýalary maglumat atributlary arkaly geçireniňizde , opsiýanyň adynyň görnüşini “ camelCase ” -den “ kebab-case ” diýip üýtgediň. Mysal üçin, data-bs-custom-class="beautifier"ýerine ulanyň data-bs-customClass="beautifier".

“Bootstrap 5.2.0” -e görä, ähli komponentler JSON setiri hökmünde ýönekeý komponent konfigurasiýasyny saklap bilýän tejribe ätiýaçlandyrylan maglumat atributyny goldaýar. data-bs-configHaçan-da bir element data-bs-config='{"delay":0, "title":123}'we data-bs-title="456"häsiýetler bar bolsa, iň soňky titlebaha bolar 456we aýratyn maglumatlar atributlary berlen bahalary ýok eder data-bs-config. Mundan başga-da, bar bolan maglumatlar atributlary ýaly JSON bahalaryny ýerleşdirmäge ukyply data-bs-delay='{"show":0,"hide":150}'.

Ady Görnüşi Bellenen Düşündiriş
interval sany 5000 Bir elementi awtomatiki tigir sürmek arasynda gijä galmagyň wagty.
keyboard boolean true Karuseliň klawiatura hadysalaryna reaksiýa bermelimi.
pause setir, boolean "hover" Gurnalan bolsa "hover", karuseliň tigir sürmegini duruzýar we karuseliň mouseentertigir sürmegini dowam etdirýär mouseleave. Eger sazlanan bolsa false, karuseliň üstünde gezmek ony saklamaz. Duýgurlyk bilen işleýän enjamlarda, awtomatiki usulda işe başlamazdan "hover"welosiped sürmek (ulanyjy karusel bilen gatnaşygy gutarandan soň) iki aralykda durar. touchendBu, syçanjygyň özüni alyp barşyna goşmaça.
ride setir, boolean false Ulanyjy birinji elementi el bilen trueaýlandan soň karuseli awtomatiki görkezýär. Gurnalan bolsa "carousel", karuseli ýükde awtomatiki görkezýär.
touch boolean true Karuseliň duýgur ekran enjamlarynda çep / saga süýşürmek täsirini goldamalymy.
wrap boolean true Karuseliň yzygiderli aýlanmalydygy ýa-da gaty duralgalary bolmaly.

Usullar

Asynkron usullar we geçişler

APIhli API usullary asynkron bolup, geçişe başlaýar . Geçiş başlan badyna, ýöne gutarmanka jaň edijä gaýdyp gelýärler . Mundan başga-da, geçiş komponentine çagyryş usuly hasaba alynmaz .

Has giňişleýin maglumat üçin JavaScript resminamalarymyza serediň .

Karusel konstruktory bilen karusel mysalyny döredip bilersiňiz, mysal üçin goşmaça wariantlar bilen başlamak we zatlaryň üsti bilen tigir sürmek üçin:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
Usul Düşündiriş
cycle Karusel önümleriniň çepden saga aýlanmagy.
dispose Bir elementiň karuselini ýok edýär. (DOM elementindäki saklanan maglumatlary aýyrýar)
getInstance DOM elementi bilen baglanyşykly karusel mysalyny almaga mümkinçilik berýän statiki usul, ony şeýle ulanyp bilersiňiz : bootstrap.Carousel.getInstance(element).
getOrCreateInstance DOM elementi bilen baglanyşykly karusel mysalyny yzyna gaýtaryp berýän ýa-da başlamadyk ýagdaýynda täzesini döredýän statiki usul. Muny şeýle ulanyp bilersiňiz : bootstrap.Carousel.getOrCreateInstance(element).
next Indiki elemente aýlawlar. Indiki element görkezilmezden (meselem, slid.bs.carouselwaka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär.
nextWhenVisible Sahypa görünmeýän ýa-da karusel ýa-da ene-atasy görünmeýän bolsa, indiki karuseli aýlamaň. Maksatly element görkezilmezden jaň edijä gaýdyp gelýär .
pause Karuseliň zatlaryň üsti bilen tigir sürmegini bes edýär.
prev Öňki elemente aýlawlar. Öňki element görkezilmezden (meselem, slid.bs.carouselwaka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär.
to Karuseli belli bir ramka aýlaýar (massiwlere meňzeş 0 esasly). Maksatly element görkezilmezden (meselem, slid.bs.carouselwaka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär.

Wakalar

“Bootstrap” -yň karusel synpy karuseliň işlemegi üçin iki hadysany paş edýär. Iki hadysanyň hem aşakdaky goşmaça aýratynlyklary bar:

  • direction: Karuseliň süýşýän ugry (ýa "left"-da "right").
  • relatedTarget: Işjeň element hökmünde ýerine süýşürilýän DOM elementi.
  • from: Häzirki elementiň görkezijisi
  • to: Indiki elementiň görkezijisi

Karusel hadysalarynyň hemmesi karuseliň özüne (ýagny <div class="carousel">).

Çäräniň görnüşi Düşündiriş
slid.bs.carousel Karusel slaýd geçişini tamamlandan soň ýanýar.
slide.bs.carousel Mysal usuly ulanylanda derrew slideýanýar. 
const myCarousel = document.getElementById('myCarousel')

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