Pāriet uz galveno saturu Pāriet uz dokumentu navigāciju
Check
in English

Karuselis

Slaidrādes komponents, lai pārvietotos pa elementiem — attēliem vai teksta slaidiem — kā karuselis.

Šajā lapā

Kā tas strādā

Karuselis ir slaidrāde, kas paredzēta satura sērijai, kas veidota, izmantojot CSS 3D transformācijas un nedaudz JavaScript. Tas darbojas ar attēlu sēriju, tekstu vai pielāgotu marķējumu. Tas ietver arī atbalstu iepriekšējām/nākamajām vadīklām un indikatoriem.

Pārlūkprogrammās, kurās tiek atbalstīts lapas redzamības API , karuselis izvairīsies no slīdēšanas, kad tīmekļa lapa nav redzama lietotājam (piemēram, ja pārlūkprogrammas cilne ir neaktīva, pārlūkprogrammas logs ir minimizēts utt.).

Šī komponenta animācijas efekts ir atkarīgs no prefers-reduced-motionmultivides vaicājuma. Skatiet mūsu pieejamības dokumentācijas sadaļu samazinātas kustības .

Lūdzu, ņemiet vērā, ka ligzdotie karuseļi netiek atbalstīti, un karuseļi parasti neatbilst pieejamības standartiem.

Piemērs

Karuseļi automātiski nenormalizē slaidu izmērus. Tādējādi, iespējams, jums būs jāizmanto papildu utilītas vai pielāgoti stili, lai atbilstu satura izmēru. Lai gan karuseļi atbalsta iepriekšējās/nākamās vadīklas un indikatorus, tie nav īpaši pieprasīti. Pievienojiet un pielāgojiet pēc saviem ieskatiem.

Klase .activejāpievieno vienam no slaidiem, pretējā gadījumā karuselis nebūs redzams. Noteikti iestatiet unikālu opciju papildu vadīklām id, .carouselīpaši, ja vienā lapā izmantojat vairākus karuseļus. Vadības un indikatora elementiem ir jābūt data-bs-targetatribūtam (vai hrefsaitēm), kas atbilst idelementa atribūtam .carousel.

Tikai slaidi

Šeit ir karuselis tikai ar slaidiem. Ņemiet vērā, ka uz karuseļa attēliem ir .d-blockun .w-100, lai novērstu pārlūkprogrammas noklusējuma attēla līdzināšanu.

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>

Ar vadības ierīcēm

Pievienojot iepriekšējo un nākamo vadīklu. Mēs iesakām izmantot <button>elementus, taču varat arī izmantot <a>elementus ar 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>

Ar indikatoriem

Varat arī pievienot indikatorus karuselim līdzās vadības ierīcēm.

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>

Ar parakstiem

Vienkārši pievienojiet parakstus saviem slaidiem, izmantojot .carousel-captionelementu jebkurā .carousel-item. Tos var viegli paslēpt mazākos skata portos, kā parādīts tālāk, izmantojot papildu displeja utilītas . Sākotnēji mēs tos paslēpām, izmantojot .d-noneun atkal ievietojam vidēja izmēra ierīcēs, izmantojot .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

Pievienojiet .carousel-fadesavam karuselim, lai animētu slaidus ar izbalēšanas pāreju, nevis slaidu. Atkarībā no jūsu karuseļa satura (piem., tikai teksta slaidi), iespējams, vēlēsities s pievienot .bg-bodyvai kādu pielāgotu CSS, lai .carousel-itemnodrošinātu pareizu pārklāšanos.

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>

Pievienot data-bs-interval=""a .carousel-item, lai mainītu laiku, kas jāpavada starp automātisku pārslēgšanos uz nākamo vienumu.

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>

Atspējot skāriena vilkšanu

Karuseļi atbalsta skārienekrāna ierīču vilkšanu pa kreisi/pa labi, lai pārvietotos starp slaidiem. To var atspējot, izmantojot data-bs-touchatribūtu. Tālāk esošajā piemērā arī nav iekļauts data-bs-rideatribūts, tāpēc tas netiek atskaņots automātiski.

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>

Tumšs variants

Pievienojiet .carousel-darktam, lai .carouseliegūtu tumšākas vadīklas, indikatorus un parakstus. Vadīklas ir apgrieztas no noklusējuma baltā aizpildījuma ar filterCSS rekvizītu. Parakstiem un vadīklām ir papildu Sass mainīgie, kas pielāgo colorun background-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>

Pielāgota pāreja

Pārejas ilgumu .carousel-itemvar mainīt ar $carousel-transition-durationmainīgo Sass pirms kompilēšanas vai pielāgotus stilus, ja izmantojat kompilēto CSS. Ja tiek lietotas vairākas pārejas, vispirms pārliecinieties, vai transformācijas pāreja ir definēta (piemēram, transition: transform 2s ease, opacity .5s ease-out).

Sass

Mainīgie

Mainīgie lielumi visiem karuseļiem:

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

Tumšā karuseļa mainīgie :

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

Lietošana

Izmantojot datu atribūtus

Izmantojiet datu atribūtus, lai viegli kontrolētu karuseļa pozīciju. data-bs-slidepieņem atslēgvārdus prevvai next, kas maina slaida pozīciju attiecībā pret tā pašreizējo pozīciju. Varat arī izmantot, data-bs-slide-tolai nodotu neapstrādātu slaidu indeksu karuselim data-bs-slide-to="2", kas maina slaida pozīciju uz noteiktu indeksu, kas sākas ar 0.

Atribūts data-bs-ride="carousel"tiek izmantots, lai atzīmētu karuseli kā animētu, sākot ar lapas ielādi. Ja neizmantojat data-bs-ride="carousel", lai inicializētu karuseli, jums tas ir jāinicializē pašam. To nevar izmantot kopā ar (lieku un nevajadzīgu) nepārprotamu tā paša karuseļa JavaScript inicializēšanu.

Izmantojot JavaScript

Manuāli izsaukt karuseļu, izmantojot:

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

Iespējas

Tā kā opcijas var nodot, izmantojot datu atribūtus vai JavaScript, varat pievienot opcijas nosaukumu data-bs-, piemēram, data-bs-animation="{value}". Nododot opcijas, izmantojot datu atribūtus , noteikti nomainiet opcijas nosaukuma reģistra veidu no “ camelCase ” uz “ kebab-case ”. Piemēram, data-bs-custom-class="beautifier"izmantojiet data-bs-customClass="beautifier".

Sākot ar versiju Bootstrap 5.2.0, visi komponenti atbalsta eksperimentālu rezervēto datu atribūtu data-bs-config, kurā var ievietot vienkāršu komponentu konfigurāciju kā JSON virkni. Ja elementam ir atribūti data-bs-config='{"delay":0, "title":123}'un data-bs-title="456", galīgā titlevērtība būs 456un atsevišķie datu atribūti ignorēs vērtības, kas norādītas data-bs-config. Turklāt esošie datu atribūti var ietvert JSON vērtības, piemēram, data-bs-delay='{"show":0,"hide":150}'.

Vārds Tips Noklusējums Apraksts
interval numuru 5000 Laiks, kas jāpavada starp vienuma automātisku pārvietošanu.
keyboard Būla true Vai karuselim jāreaģē uz tastatūras notikumiem.
pause stīga, Būla "hover" Ja iestatīts uz "hover", tiek apturēta karuseļa mouseenterbraukšana un tiek atsākta karuseļa braukšana mouseleave. Ja iestatīts uz false, virzot kursoru virs karuseļa, tas netiks apturēts. Ierīcēs ar iespējotām skārienjūtēm, ja tas ir iestatīts uz "hover", riteņbraukšana tiks apturēta touchend(kad lietotājs ir beidzis mijiedarboties ar karuseli) divus intervālus, pēc tam automātiski atsāksies. Tas ir papildus peles uzvedībai.
ride stīga, Būla false Ja iestatīts uz true, karuselis tiek automātiski atskaņots pēc tam, kad lietotājs manuāli ir pārslēdzis pirmo vienumu. Ja iestatīts uz "carousel", ielādes karuselis tiek atskaņots automātiski.
touch Būla true Vai karuselim ir jāatbalsta skārienekrāna ierīču vilkšana pa kreisi/pa labi.
wrap Būla true Neatkarīgi no tā, vai karuselim ir jāpārvietojas nepārtraukti, vai tam ir jābūt stingriem apstāšanās gadījumiem.

Metodes

Asinhronās metodes un pārejas

Visas API metodes ir asinhronas un sāk pāreju . Viņi atgriežas pie zvanītāja, tiklīdz ir sākta pāreja, bet pirms tās beigām . Turklāt pārejas komponenta metodes izsaukums tiks ignorēts .

Plašāku informāciju skatiet mūsu JavaScript dokumentācijā .

Varat izveidot karuseļa gadījumu, izmantojot karuseļa konstruktoru, piemēram, lai inicializētu ar papildu opcijām un sāktu pārvietoties pa vienumiem:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
Metode Apraksts
cycle Pārvietojas pa karuseļa vienumiem no kreisās puses uz labo.
dispose Iznīcina elementa karuseli. (Noņem DOM elementā saglabātos datus)
getInstance Statiskā metode, kas ļauj iegūt karuseļa gadījumu, kas saistīts ar DOM elementu, varat to izmantot šādi: bootstrap.Carousel.getInstance(element).
getOrCreateInstance Statiskā metode, kas atgriež ar DOM elementu saistītu karuseļa gadījumu vai izveido jaunu, ja tas nav inicializēts. Varat to izmantot šādi: bootstrap.Carousel.getOrCreateInstance(element).
next Pāriet uz nākamo vienumu. Atgriežas pie zvanītāja, pirms ir parādīts nākamais vienums (piemēram, pirms slid.bs.carouselnotikuma).
nextWhenVisible Nepārslēdziet karuseli uz nākamo, ja lapa nav redzama vai nav redzams karuselis vai tā vecākais. Atgriežas pie zvanītāja, pirms mērķa vienums ir parādīts .
pause Neļauj karuselim pārvietoties pa priekšmetiem.
prev Pāriet uz iepriekšējo vienumu. Atgriežas pie zvanītāja, pirms ir parādīts iepriekšējais vienums (piem., pirms slid.bs.carouselnotikuma).
to Pārvieto karuseli uz noteiktu kadru (0, kas ir līdzīgs masīvam). Atgriežas pie zvanītāja, pirms ir parādīts mērķa vienums (piemēram, pirms slid.bs.carouselnotikuma).

Pasākumi

Bootstrap karuseļa klase atklāj divus notikumus, lai pievienotos karuseļa funkcionalitātei. Abiem notikumiem ir šādas papildu īpašības:

  • direction: virziens, kurā karuselis slīd (vai nu "left") "right".
  • relatedTarget: DOM elements, kas tiek bīdīts vietā kā aktīvais vienums.
  • from: pašreizējā vienuma rādītājs
  • to: nākamā vienuma rādītājs

Visi karuseļa notikumi tiek aktivizēti pašā karuselī (ti, uz <div class="carousel">).

Pasākuma veids Apraksts
slid.bs.carousel Tiek aktivizēts, kad karuselis ir pabeidzis slaida pāreju.
slide.bs.carousel Aktivizējas nekavējoties, kad slidetiek izsaukta instances metode. 
const myCarousel = document.getElementById('myCarousel')

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