in English

Karuselė

Skaidrių demonstravimo komponentas, skirtas pereiti per elementus – vaizdus ar teksto skaidres – kaip karuselė.

Kaip tai veikia

Karuselė yra skaidrių demonstracija, skirta važiuoti per daugybę turinio, sukurta naudojant CSS 3D transformacijas ir šiek tiek JavaScript. Jis veikia su vaizdų, teksto ar pasirinktinio žymėjimo serijomis. Tai taip pat apima ankstesnių / kitų valdiklių ir indikatorių palaikymą.

Naršyklėse, kuriose palaikoma Puslapio matomumo API , karuselė išvengs slydimo, kai tinklalapio vartotojas nemato (pvz., kai naršyklės skirtukas neaktyvus, naršyklės langas sumažintas ir pan.).

Šio komponento animacijos efektas priklauso nuo prefers-reduced-motionmedijos užklausos. Žr . mūsų pritaikymo neįgaliesiems dokumentacijos skyrių „Sumažintas judėjimas“ .

Atminkite, kad įdėtos karuselės nepalaikomos, o karuselės paprastai neatitinka pritaikymo neįgaliesiems standartų.

Galiausiai, jei kuriate „JavaScript“ iš šaltinio, tam reikiautil.js .

Pavyzdys

Karuselės automatiškai nesunormina skaidrės matmenų. Todėl gali tekti naudoti papildomas priemones arba pasirinktinius stilius, kad galėtumėte tinkamai nustatyti turinį. Nors karuselės palaiko ankstesnius / kitus valdiklius ir indikatorius, jie nėra aiškiai reikalingi. Pridėkite ir tinkinkite, kaip jums atrodo tinkama.

Klasę .activereikia pridėti prie vienos skaidrės, kitaip karuselė nebus matoma. Taip pat būtinai nustatykite unikalų idpasirenkamų .carouselvaldiklių parametrą, ypač jei viename puslapyje naudojate kelias karuseles. Valdymo ir indikatoriaus elementai turi turėti data-targetatributą (arba hrefnuorodoms), atitinkantį idelemento .carouselatributą.

Tik skaidrės

Štai karuselė tik su skaidrėmis. Atkreipkite dėmesį į karuselės vaizdų buvimą .d-blockir , kad išvengtumėte numatytojo naršyklės vaizdo išlygiavimo..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>

Su valdikliais

Pridedamas ankstesnis ir kitas valdikliai. Rekomenduojame naudoti <button>elementus, bet taip pat galite naudoti <a>elementus su role="button".

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

Su indikatoriais

Taip pat galite pridėti indikatorių prie karuselės, kartu su valdikliais.

<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>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Su užrašais

Lengvai pridėkite antraštes skaidrėse naudodami .carousel-captionelementą bet kuriame .carousel-item. Juos galima lengvai paslėpti mažesnėse peržiūros srityse, kaip parodyta toliau, naudojant pasirenkamas rodymo priemones . Iš pradžių paslepiame juos naudodami .d-noneir grąžiname vidutinio dydžio įrenginiuose naudodami .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>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-target="#carouselExampleCaptions" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Crossfade

Pridėkite .carousel-fadeprie karuselės, kad suaktyvintumėte skaidres su išnykimo perėjimu, o ne skaidrėmis. Atsižvelgiant į jūsų karuselės turinį (pvz., tik teksto skaidres), galbūt norėsite pridėti .bg-bodyarba tam tikrą tinkintą CSS prie .carousel-items, kad būtų tinkamas kryžminis išblukimas.

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

Pridėti data-interval=""prie a .carousel-item, kad pakeistumėte laiką, per kurį reikia uždelsti nuo automatinio perėjimo prie kito elemento.

<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>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleInterval" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Išjungti perbraukimą liečiant

Karuselės palaiko braukimą į kairę / dešinę jutiklinio ekrano įrenginiuose, kad galėtumėte pereiti nuo vienos skaidrės į kitą. Tai galima išjungti naudojant data-touchatributą. Toliau pateiktame pavyzdyje taip pat nėra data-rideatributo, data-interval="false"todėl jis automatiškai nepaleidžiamas.

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-interval="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-target="#carouselExampleControlsNoTouching" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Naudojimas

Per duomenų atributus

Naudokite duomenų atributus, kad lengvai valdytumėte karuselės padėtį. data-slidepriima raktinius žodžius prevarba next, kuris pakeičia skaidrės padėtį, palyginti su dabartine padėtimi. Arba naudokite data-slide-toneapdorotą skaidrės rodyklę perduoti į karuselę data-slide-to="2", kuri perkelia skaidrės padėtį į tam tikrą indeksą, prasidedantį 0.

Atributas naudojamas data-ride="carousel"norint pažymėti karuselę kaip animacinę, pradedant nuo puslapio įkėlimo. Jei nenaudojate data-ride="carousel"karuselės inicijavimui, turite ją inicijuoti patys. Jo negalima naudoti kartu su (pertekline ir nereikalinga) aiškia tos pačios karuselės „JavaScript“ iniciacija.

Per JavaScript

Skambinkite į karuselę rankiniu būdu naudodami:

$('.carousel').carousel()

Galimybės

Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-, kaip ir data-interval="".

vardas Tipas Numatytas apibūdinimas
intervalas numerį 5000 Laikas, per kurį reikia uždelsti tarp automatinio elemento paleidimo. Jei false, karuselė automatiškai nepasikeis.
klaviatūra loginis tiesa Ar karuselė turėtų reaguoti į klaviatūros įvykius.
Pauzė styga | loginis 'svyruok'

Jei nustatyta 'hover', pristabdo karuselės judėjimą mouseenterir atnaujina karuselės judėjimą mouseleave. Jei nustatyta į false, užvedus pelės žymeklį virš karuselės ji nebus pristabdyta.

Jutikliniuose įrenginiuose, kai nustatyta į 'hover', važiavimas dviračiu bus pristabdytas touchend(kai naudotojas baigs sąveikauti su karusele) dviem intervalais, o po to automatiškai pratęsiamas. Atminkite, kad tai papildo aukščiau aprašytą pelės elgesį.
važiuoti styga klaidinga Automatiškai paleidžiama karuselė po to, kai vartotojas rankiniu būdu perkelia pirmąjį elementą. Jei nustatyta į 'carousel', automatiškai paleidžiama karuselė įkeliant.
apvynioti loginis tiesa Ar karuselė turi važiuoti nuolat, ar sunkiai sustoti.
liesti loginis tiesa Ar karuselė turėtų palaikyti braukimo į kairę / dešinę sąveiką jutiklinio ekrano įrenginiuose.

Metodai

Asinchroniniai metodai ir perėjimai

Visi API metodai yra asinchroniniai ir pradeda perėjimą . Jie grįžta pas skambinantįjį, kai tik prasideda perėjimas, bet jam nepasibaigus . Be to, pereinamojo komponento metodo iškvietimas bus ignoruojamas .

Daugiau informacijos rasite mūsų JavaScript dokumentacijoje .

.carousel(options)

Inicijuoja karuselę su pasirenkamomis parinktimis objectir pradeda važiuoti per elementus.

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

.carousel('cycle')

Važiuoja per karuselės elementus iš kairės į dešinę.

.carousel('pause')

Sustabdo karuselės judėjimą per daiktus.

.carousel(number)

Perkelia karuselę į tam tikrą kadrą (pagrįsta 0, panašiai kaip masyvas). Grįžta į skambinantįjį prieš parodant tikslinį elementą (ty prieš slid.bs.carouselįvykį).

.carousel('prev')

Perkeliama į ankstesnį elementą. Grįžta į skambinantįjį, kol nebuvo parodytas ankstesnis elementas (ty prieš slid.bs.carouselįvykį).

.carousel('next')

Perkeliama į kitą elementą. Grįžta į skambinantįjį prieš parodant kitą elementą (ty prieš slid.bs.carouselįvykį).

.carousel('dispose')

Sunaikina elemento karuselę.

.carousel('nextWhenVisible')

Neperjunkite karuselės į kitą, kai puslapis nematomas arba nematoma karuselės ar jos pirminio puslapio. Grįžta į skambinantįjį prieš parodant kitą elementą (ty prieš slid.bs.carouselįvykį).

.carousel('to')

Perkelia karuselę į tam tikrą kadrą (pagrįsta 0, panašiai kaip masyvas). Grįžta į skambinantįjį prieš parodant kitą elementą (ty prieš slid.bs.carouselįvykį).

Renginiai

„Bootstrap“ karuselės klasė atskleidžia du įvykius, kad būtų galima prisijungti prie karuselės funkcijų. Abu įvykiai turi šias papildomas savybes:

  • direction: kryptis, kuria slysta karuselė ( "left"arba "right").
  • relatedTarget: DOM elementas, kuris stumiamas į vietą kaip aktyvus elementas.
  • from: dabartinio elemento rodyklė
  • to: kito elemento rodyklė

Visi karuselės įvykiai suaktyvinami pačioje karuselėje (ty į <div class="carousel">).

Renginio tipas apibūdinimas
skaidrė.bs.karuselė Šis įvykis suaktyvinamas iš karto, kai slideiškviečiamas egzemplioriaus metodas.
slid.bs.karuselė Šis įvykis suaktyvinamas, kai karuselė baigia skaidrės perėjimą. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

Keisti perėjimo trukmę

Perėjimo trukmę .carousel-itemgalima pakeisti naudojant $carousel-transitionSass kintamąjį prieš kompiliuojant arba pasirinktinius stilius, jei naudojate sukompiliuotą CSS. Jei taikomi keli perėjimai, pirmiausia įsitikinkite, kad transformacijos perėjimas yra apibrėžtas (pvz., transition: transform 2s ease, opacity .5s ease-out).