Source

Karuselis

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

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.

Visbeidzot, ja veidojat mūsu JavaScript no avota, tam ir nepieciešamsutil.js .

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 pielāgotu satura lielumu. 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 arī unikālu ID .carouselpapildu vadīklām, īpaši, ja vienā lapā izmantojat vairākus karuseļus. Vadības un indikatora elementiem ir jābūt data-targetatribūtam (vai hrefsaitēm), kas atbilst .carouselelementa ID.

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.

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

Ar vadības ierīcēm

Pievienojot iepriekšējo un nākamo vadīklu:

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

Ar indikatoriem

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

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

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.

<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

Pievienojiet .carousel-fadesavam karuselim, lai animētu slaidus ar izbalēšanas pāreju, nevis slaidu.

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

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

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

Lietošana

Izmantojot datu atribūtus

Izmantojiet datu atribūtus, lai viegli kontrolētu karuseļa pozīciju. data-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-slide-tolai nodotu neapstrādātu slaidu indeksu karuselim data-slide-to="2", kas maina slaida pozīciju uz noteiktu indeksu, kas sākas ar 0.

Atribūts data-ride="carousel"tiek izmantots, lai atzīmētu karuseli kā animētu, sākot ar lapas ielādi. Ja neizmantojat data-ride="carousel"karuseļa inicializāciju, 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:

$('.carousel').carousel()

Iespējas

Opcijas var nodot, izmantojot datu atribūtus vai JavaScript. Datu atribūtiem pievienojiet opcijas nosaukumu data-, tāpat kā data-interval="".

Vārds Tips Noklusējums Apraksts
intervāls numuru 5000 Laiks, kas jāpavada starp vienuma automātisku pārvietošanu. Ja tas ir nepatiess, karuselis automātiski nedarbosies.
tastatūra Būla taisnība Vai karuselim jāreaģē uz tastatūras notikumiem.
pauze stīga | Būla "lidināt"

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. Ņemiet vērā, ka tas ir papildus iepriekš minētajai peles darbībai.
braukt virkne viltus Automātiski tiek atskaņots karuselis pēc tam, kad lietotājs manuāli pārvieto pirmo vienumu. Ja “karuselis”, tiek automātiski atskaņots karuselis ielādes laikā.
iesaiņojums Būla taisnība Neatkarīgi no tā, vai karuselim ir jāpārvietojas nepārtraukti, vai tam ir jābūt stingriem apstāšanās gadījumiem.
pieskarties Būla taisnība Vai karuselim ir jāatbalsta skārienekrāna ierīču vilkšana pa kreisi/pa labi.

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

.carousel(options)

Inicializē karuseli ar papildu opcijām objectun sāk pārvietoties pa vienumiem.

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

.carousel('cycle')

Pārvietojas pa karuseļa vienumiem no kreisās puses uz labo.

.carousel('pause')

Neļauj karuselim pārvietoties pa priekšmetiem.

.carousel(number)

Pārvieto karuseli uz noteiktu kadru (0, kas ir līdzīgs masīvam). Atgriežas pie zvanītāja, pirms mērķa vienums ir parādīts (ti, pirms slid.bs.carouselnotikuma).

.carousel('prev')

Pāriet uz iepriekšējo vienumu. Atgriežas pie zvanītāja, pirms ir parādīts iepriekšējais vienums (ti, pirms slid.bs.carouselnotikuma).

.carousel('next')

Pāriet uz nākamo vienumu. Atgriežas pie zvanītāja, pirms ir parādīts nākamais vienums (ti, pirms slid.bs.carouselnotikuma).

.carousel('dispose')

Iznīcina elementa karuseli.

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
slide.bs.carousel Šis notikums tiek aktivizēts nekavējoties, kad slidetiek izsaukta instances metode.
slid.bs.karuselis Šis notikums tiek aktivizēts, kad karuselis ir pabeidzis slaida pāreju. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

Mainiet pārejas ilgumu

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