Saltatu eduki nagusira Saltatu dokumentuen nabigaziora
Check
in English

Karrusela

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

Orrialde honetan

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.

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 aukerako kontroletarako bakarra ezarri duzula id, .carouselbatez ere orrialde bakarrean hainbat karrusel erabiltzen ari bazara. Kontrol eta adierazle elementuek elementuarekin bat datorren data-bs-targetatributu bat (edo esteketarako) izan behar dute .hrefid.carousel

Diapositibak soilik

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

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>

Kontrolekin

Aurreko eta hurrengo kontrolak gehitzea. Elementuak erabiltzea gomendatzen dugu , baina elementuekin <button>ere erabil ditzakezu .<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>

Adierazleekin

Adierazleak ere gehi ditzakezu karrusela, kontrolekin batera.

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>

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.

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

Gehitu .carousel-fadekarruselera diapositibak animatzeko, diapositiba baten ordez, desagertzeko trantsizio batekin. Zure karruselaren edukiaren arabera (adibidez, testua soilik diapositibak), baliteke .bg-bodyCSS pertsonalizatu batzuk gehitu nahi izatea .carousel-itemgurutze-fading egokia izateko.

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>

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

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>

Desgaitu ukipen-hastaketa

Karruselek ezkerrera/eskuinera mugitzea onartzen dute ukipen-pantailako gailuetan diapositiba batetik bestera mugitzeko. data-bs-touchHau atributua erabiliz desgaitu daiteke . Beheko adibideak ere ez du data-bs-rideatributua sartzen, beraz, ez da automatikoki erreproduzitzen.

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>

Aldaera iluna

Gehitu kontrol, adierazle eta epigrafe ilunagoak lortzeko .carousel-dark. Kontrolak CSS propietatearen .carouselbetegarri zuri lehenetsitik alderantzikatu dira . filterEpigrafeek eta kontrolek Sass aldagai gehigarriak dituzte coloreta pertsonalizatzen dituztenak 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>

Trantsizio pertsonalizatua

Trantsizioaren iraupena Sass aldagaiarekin .carousel-itemalda daiteke $carousel-transition-durationkonpilatu 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.).

Sass

Aldagaiak

Karrusel guztien aldagaiak:

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

Karrusel ilunaren aldagaiak :

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

Erabilera

Datu-atributuen bidez

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

data-bs-ride="carousel"Atributua orria kargatzen denetik hasita karrusel bat animazio gisa markatzeko erabiltzen da . Zure karrusela hasieratzeko erabiltzen ez data-bs-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:

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

Aukerak

Aukerak datu-atributuen edo JavaScript bidez pasa daitezkeenez, aukera-izen bat gehi diezaiokezu data-bs-, honela data-bs-animation="{value}". Ziurtatu aukera-izenaren kasu-mota " camelCase "-tik " kebab-case "-ra aldatzen duzula aukerak datu-atributuen bidez pasatzen dituzunean. Adibidez, erabili data-bs-custom-class="beautifier"ordez data-bs-customClass="beautifier".

Bootstrap 5.2.0-tik aurrera, osagai guztiek erreserbatutako datu-atributu esperimentaldata-bs-config bat onartzen dute , osagaien konfigurazio sinplea JSON kate gisa gorde dezakeena. Elementu batek data-bs-config='{"delay":0, "title":123}'eta data-bs-title="456"atributuak dituenean, azken titlebalioa izango da 456eta bereizitako datu-atributuek gailuan emandako balioak gainidatziko dituzte data-bs-config. Gainera, lehendik dauden datu-atributuek JSON balioak gorde ditzakete data-bs-delay='{"show":0,"hide":150}'.

Izena Mota Lehenetsia Deskribapena
interval zenbakia 5000 Elementu bat automatikoki bizikletaz ibiltzearen artean atzeratu behar den denbora.
keyboard boolearra true Karruselak teklatuko gertaeren aurrean erreakzionatu behar duen ala ez.
pause katea, boolearra "hover" Aukeran ezartzen bada "hover", karruselaren txirrindularitza aktibatuta gelditzen du eta karruselaren txirrindularitza aktibatuta mouseenterberriro 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. Hau saguaren portaeraz gain.
ride katea, boolearra false Honetan ezartzen bada true, karrusela automatikoki erreproduzitzen du erabiltzaileak lehen elementua eskuz zikloa egin ondoren. Honetan ezartzen bada "carousel", karrusela automatikoki erreproduzitzen du kargatzean.
touch boolearra true Karruselak ukipen-pantailako gailuetan ezkerrera/eskuinera irristatu elkarrekintzak onartu behar dituen ala ez.
wrap boolearra true Karruselak etengabe zirkulatzen duen edo geldialdi gogorrak izan behar dituen.

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 .

Karruselaren instantzia bat sor dezakezu karruselaren konstruktorearekin, adibidez, aukera gehigarriekin hasieratzeko eta elementuen bidez bizikletaz ibiltzeko:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
Metodoa Deskribapena
cycle Karruselaren elementuetan zehar ibiliko da ezkerretik eskuinera.
dispose Elementu baten karrusela suntsitzen du. (DOM elementuan gordetako datuak kentzen ditu)
getInstance Metodo estatikoa DOM elementu bati lotutako karruselaren instantzia lortzeko aukera ematen duena, honela erabil dezakezu: bootstrap.Carousel.getInstance(element).
getOrCreateInstance Metodo estatikoa DOM elementu bati lotutako karusel-instantzia itzultzen duena edo berri bat sortzen duena hasieratu ez bazen. Honela erabil dezakezu: bootstrap.Carousel.getOrCreateInstance(element).
next Zikloak hurrengo elementura. Deitzailearengana itzultzen da hurrengo elementua erakutsi baino lehen (adibidez, slid.bs.carouselgertaera gertatu baino lehen).
nextWhenVisible Ez ibili karrusela hurrengora orria ikusten ez denean edo karrusela edo haren gurasoa ikusten ez denean. Deitzailearengana itzultzen da xede-elementua erakutsi aurretik .
pause Karrusela elementuetan zehar bizikletaz ibiltzeari uzten dio.
prev Zikloak aurreko elementura. Aurreko elementua erakutsi aurretik (adibidez, slid.bs.carouselgertaera gertatu baino lehen) deitzen duenari itzultzen zaio.
to Karrusela fotograma jakin batera birziklatzen du (0 oinarrian, array baten antzera). Xede-elementua erakutsi baino lehen deitzen duenari itzultzen zaio (adibidez, slid.bs.carouselgertaera gertatu aurretik).

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
slid.bs.carousel Karruselak diapositiba-trantsizioa amaitu duenean jaurti da.
slide.bs.carousel slideInstantzia metodoa deitzen denean berehala pizten da. 
const myCarousel = document.getElementById('myCarousel')

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