Karrusela

Elementuetan zehar (irudiak edo testu-diapositibak) bizikletaz ibiltzeko diapositiba-aurkezpenaren osagaia, karrusel bat bezala.

Nola dabil

Karrusela eduki sorta batean zehar bizikletaz ibiltzeko diapositiba aurkezpena da, CSS 3D eraldaketekin eta JavaScript pixka batekin eraikia. Irudi, testu edo marka pertsonalizatu batzuekin funtzionatzen du. Aurreko/hurrengo kontrol eta adierazleetarako laguntza ere barne hartzen du.

Page Visibility APIa onartzen duten arakatzaileetan , karruselak irristatzea saihestuko du webgunea erabiltzaileak ikusten ez duenean (adibidez, arakatzailearen fitxa inaktibo dagoenean, arakatzailearen leihoa minimizatuta dagoenean, etab.).

Osagai honen animazio-efektua prefers-reduced-motionmultimedia kontsultaren menpe dago. Ikusi gure irisgarritasun-dokumentazioaren mugimendu murriztuaren atala .

Kontuan izan habiaraturiko karruselak ez direla onartzen eta, oro har, karruselek ez dituztela irisgarritasun estandarrak betetzen.

Azkenik, gure JavaScript iturritik eraikitzen ari bazara, behar duutil.js .

Adibidea

Karruselek ez dituzte diapositiba-dimentsioak automatikoki normalizatzen. Hori dela eta, baliteke utilitate gehigarriak edo estilo pertsonalizatuak erabili behar izatea edukia behar bezala tamainatzeko. Karruselek aurreko/hurrengo kontrolak eta adierazleak onartzen dituzten arren, ez dira espresuki beharrezkoak. Gehitu eta pertsonalizatu egoki ikusten duzun moduan.

.activeKlasea diapositiba batean gehitu behar da, bestela karrusela ez da ikusgai egongo. Ziurtatu ID esklusibo bat ezartzen duzula .carouselaukerako kontroletarako, batez ere orrialde bakarrean hainbat karrusel erabiltzen ari bazara. Kontrol eta adierazle elementuek elementuaren IDarekin bat datorren data-targetatributu bat (edo esteketarako) izan behar dute .href.carousel

Diapositibak soilik

Hona hemen diapositibak soilik dituen karrusel bat. .d-blockKontuan izan karruselaren eta irudien presentzia .w-100arakatzailearen irudi lehenetsien lerrokatzea saihesteko.

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

Kontrolekin

Aurreko eta hurrengo kontrolak gehitzea:

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

Adierazleekin

Adierazleak ere gehi ditzakezu karrusela, kontrolekin batera.

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

Epigrafeekin

Gehitu erraz azpitituluak zure diapositibetan .carousel-captionedozein elementurekin .carousel-item. Ikuspegi txikiagoetan erraz ezkutatu daitezke, behean erakusten den moduan, aukerako pantaila-utilitateekin . Hasieran ezkutatzen ditugu .d-noneeta gailu ertainetara itzultzen ditugu .d-md-block.

Lehenengo diapositiba-etiketa

Nulla vitae elit libero, a pharetra augue mollis interdum.

Bigarren diapositiba etiketa

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Hirugarren diapositiba-etiketa

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

<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

Gehitu .carousel-fadekarruselera diapositibak animatzeko, diapositiba baten ordez, desagertzeko trantsizio batekin.

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

Banakako `.carousel-item`tartea

Gehitu data-interval=""a .carousel-item-ra automatikoki bizikletaz hurrengo elementura arte atzeratu behar den denbora aldatzeko.

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

Erabilera

Datu-atributuen bidez

Erabili datu-atributuak karruselaren posizioa erraz kontrolatzeko. data-slidegako-hitzak onartzen ditu prevedo next, eta horrek diapositiba-posizioa bere uneko posizioarekiko aldatzen du. Bestela, erabili data-slide-todiapositiba-indize gordina karruselara pasatzeko data-slide-to="2", eta horrek diapositiba-posizioa indize jakin batera aldatzen du 0.

data-ride="carousel"Atributua orria kargatzen denetik hasita karrusel bat animazio gisa markatzeko erabiltzen da . Zure karrusela hasieratzeko erabiltzen ez data-ride="carousel"baduzu, zuk zeuk hasieratu beharko duzu. Ezin da erabili karrusel beraren Javascript-en hasiera esplizituarekin batera (erredundantea eta beharrezkoa ez dena).

JavaScript bidez

Deitu karuselera eskuz honekin:

$('.carousel').carousel()

Aukerak

Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-, hemen bezala data-interval="".

Izena	Mota	Lehenetsia	Deskribapena
tartea	zenbakia	5000	Elementu bat automatikoki bizikletaz ibiltzearen artean atzeratu behar den denbora. Gezurra bada, karrusela ez da automatikoki zirkulatuko.
teklatua	boolearra	egia	Karruselak teklatuko gertaeren aurrean erreakzionatu behar duen ala ez.
pausa	katea \| boolearra	"pasatu"	Aukeran ezartzen bada `"hover"`, karruselaren txirrindularitza aktibatuta gelditzen du eta karruselaren txirrindularitza aktibatuta `mouseenter`berriro hasiko da `mouseleave`. Aukeran ezartzen bada `false`, karruselaren gainean pasatzeak ez du etengo. Ukimen-gaitutako gailuetan, aukeran ezarrita dagoenean `"hover"`, txirrindularitza eten egingo da `touchend`(erabiltzaileak karruselarekin elkarreraginean amaitzen duenean) bi tartez, automatikoki berriro hasi aurretik. Kontuan izan hau goiko saguaren portaeraz gain dagoela.
ibili	katea	faltsua	Karrusela automatikoki erreproduzitzen du erabiltzaileak lehen elementua eskuz zikloa egin ondoren. "Carrusela" bada, karrusela automatikoki erreproduzitzen du kargatzean.
bildu	boolearra	egia	Karruselak etengabe zirkulatzen duen edo geldialdi gogorrak izan behar dituen.
ukitu	boolearra	egia	Karruselak ukipen-pantailako gailuetan ezkerrera/eskuinera irristatu elkarrekintzak onartu behar dituen ala ez.

Metodoak

Metodo asinkronoak eta trantsizioak

API metodo guztiak asinkronoak dira eta trantsizio bat hasten dute . Trantsizioa hasi bezain laster baina amaitu baino lehen itzultzen dira deitzailearengana . Gainera, trantsizio-osagai baten metodo-dei bati ez ikusi egingo zaio .

Ikus gure JavaScript dokumentazioa informazio gehiago lortzeko .

`.carousel(options)`

Karrusela hautazko aukera batekin hasieratzen du objecteta elementuen bidez bizikletaz hasten da.

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

`.carousel('cycle')`

Karruselaren elementuetan zehar ibiliko da ezkerretik eskuinera.

`.carousel('pause')`

Karrusela elementuetan zehar bizikletaz ibiltzeari uzten dio.

`.carousel(number)`

Karrusela fotograma jakin batera birziklatzen du (0 oinarrian, array baten antzera). Xede-elementua erakutsi aurretik (hau da, slid.bs.carouselgertaera gertatu baino lehen) itzultzen da deitzaileari.

`.carousel('prev')`

Zikloak aurreko elementura. Aurreko elementua erakutsi aurretik (hau da, slid.bs.carouselgertaera gertatu baino lehen) itzultzen da deitzen duenari.

`.carousel('next')`

Zikloak hurrengo elementura. Deitzailearengana itzultzen da hurrengo elementua erakutsi baino lehen (hau da, slid.bs.carouselgertaera gertatu baino lehen).

`.carousel('dispose')`

Elementu baten karrusela suntsitzen du.

`.carousel('nextWhenVisible')`

Ez ibili karrusela hurrengora orria ikusten ez denean edo karusela edo bere gurasoa ikusten ez denean. Deitzailearengana itzultzen da hurrengo elementua erakutsi baino lehen (hau da, slid.bs.carouselgertaera gertatu baino lehen).

`.carousel('to')`

Karrusela fotograma jakin batera birziklatzen du (0 oinarrian, array baten antzera). Deitzailearengana itzultzen da hurrengo elementua erakutsi baino lehen (hau da, slid.bs.carouselgertaera gertatu baino lehen).

Gertaerak

Bootstrap-en karrusel klaseak bi gertaera erakusten ditu karruselaren funtzionalitatera konektatzeko. Bi ekitaldiek propietate gehigarri hauek dituzte:

direction: Karrusela irristatzen den norabidea ( "left"edo "right").
relatedTarget: elementu aktibo gisa lekuan sartzen ari den DOM elementua.
from: Uneko elementuaren indizea
to: Hurrengo elementuaren aurkibidea

Karruselaren gertaera guztiak karruselaren aurka jaurtitzen dira (hau da, <div class="carousel">).

Gertaera mota	Deskribapena
diapositiba.bs.karrusela	Gertaera hau berehala abiarazten `slide`da instantzia-metodoa deitzen denean.
irristatu.bs.karrusel	Gertaera hau karruselak diapositiba-trantsizioa amaitu duenean abiarazten da.

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

Aldatu trantsizioaren iraupena

Trantsizioaren iraupena Sass aldagaiarekin .carousel-itemalda daiteke $carousel-transitionkonpilatu aurretik edo estilo pertsonalizatuak konpilatutako CSS erabiltzen ari bazara. Trantsizio anitz aplikatzen badira, ziurtatu transformazio trantsizioa lehenik definitu dela (adib. transition: transform 2s ease, opacity .5s ease-out).