Karuselo

Bildprezenta komponanto por bicikli tra elementoj - bildoj aŭ lumbildoj - kiel karuselo.

Kiel ĝi funkcias

La karuselo estas bildoprezento por bicikli tra serio da enhavo, konstruita kun CSS 3D transformoj kaj iom da JavaScript. Ĝi funkcias kun serio de bildoj, teksto aŭ kutima markado. Ĝi ankaŭ inkluzivas subtenon por antaŭaj/sekvaj kontroloj kaj indikiloj.

En retumiloj kie la Page Visibility API estas subtenata, la karuselo evitos gliti kiam la retpaĝo ne estas videbla por la uzanto (kiel kiam la retumila langeto estas neaktiva, la retumila fenestro estas minimumigita, ktp.).

Bonvolu konscii, ke nestitaj karuseloj ne estas subtenataj, kaj karuseloj ĝenerale ne konformas al alireblaj normoj.

Finfine, se vi konstruas nian JavaScript el la fonto, ĝi postulasutil.js .

Ekzemplo

Karuseloj ne aŭtomate normaligas dimensiojn de lumbildoj. Kiel tia, vi eble bezonos uzi pliajn ilojn aŭ kutimajn stilojn por taŭge grandeco de enhavo. Dum karuseloj subtenas antaŭajn/postajn kontrolojn kaj indikilojn, ili ne estas eksplicite postulataj. Aldonu kaj agordu laŭplaĉe.

Nepre agordu unikan identigilon sur la .carouselpor laŭvolaj kontroloj, precipe se vi uzas plurajn karuselojn sur ununura paĝo.

Nur diapozitivoj

Jen karuselo kun nur diapozitivoj. Notu la ĉeeston de la .d-blockkaj .img-fluidsur karuselaj bildoj por malhelpi retumilon defaŭltan bildan vicigon.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

Kun kontroloj

Aldonante la antaŭajn kaj sekvajn kontrolojn:

Antaŭa Poste

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </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>

Kun indikiloj

Vi ankaŭ povas aldoni la indikilojn al la karuselo, kune kun la kontroloj, ankaŭ.

Antaŭa Poste

<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 class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </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>

Kun bildotekstoj

Aldonu subtitolojn al viaj diapozitivoj facile per la .carousel-captionelemento en iu ajn .carousel-item. Ili povas esti facile kaŝitaj sur pli malgrandaj vidfenestroj, kiel montrite malsupre, kun laŭvolaj montraj utilecoj . Ni kaŝas ilin komence per .d-nonekaj revenigas ilin sur mezgrandaj aparatoj kun .d-md-block.

Unua glita etikedo

Nulla vitae elit libero, a pharetra augue mollis interdum.

Dua glita etikedo

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tria glita etikedo

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Antaŭa Poste

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

Uzado

Per datumaj atributoj

Uzu datumajn atributojn por facile kontroli la pozicion de la karuselo. data-slideakceptas la ŝlosilvortojn prevaŭ next, kiu ŝanĝas la glitpozicion rilate al ĝia nuna pozicio. Alternative, uzu data-slide-topor transdoni krudan glitan indekson al la karuselo data-slide-to="2", kiu movas la glitpozicion al aparta indekso komencanta per 0.

La data-ride="carousel"atributo estas uzata por marki karuselon kiel vigliganta ekde la paĝa ŝarĝo. Ĝi ne povas esti uzata en kombinaĵo kun (redunda kaj nenecesa) eksplicita JavaScript-komencigo de la sama karuselo.

Per JavaScript

Voku karuselon permane kun:

$('.carousel').carousel()

Opcioj

Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-, kiel en data-interval="".

Metodoj

.carousel(options)

Komencas la karuselon kun laŭvolaj opcioj objectkaj komencas bicikli tra eroj.

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

.carousel('cycle')

Biciklas tra la karuselaj eroj de maldekstre dekstren.

.carousel('pause')

Maldaŭrigas la karuselon de bicikli tra eroj.

.carousel(number)

Biciklas la karuselon al aparta kadro (bazita 0, simile al tabelo). Revenas al la alvokanto antaŭ ol la cela objekto estis montrita (te antaŭ ol la slid.bs.carouselevento okazas).

.carousel('prev')

Ciklas al la antaŭa ero. Revenas al la alvokanto antaŭ ol la antaŭa ero estis montrita (te antaŭ ol la slid.bs.carouselevento okazas).

.carousel('next')

Bicikloj al la sekva ero. Revenas al la alvokanto antaŭ ol la sekva ero estas montrita (t.e. antaŭ ol la slid.bs.carouselevento okazas).

.carousel('dispose')

Detruas la karuselon de elemento.

Eventoj

La karuselklaso de Bootstrap elmontras du okazaĵojn por hokado en karuselfunkciecon. Ambaŭ okazaĵoj havas la sekvajn kromajn trajtojn:

• direction: La direkto en kiu la karuselo glitas (aŭ "left"aŭ "right").
• relatedTarget: La DOM-elemento kiu estas glita en lokon kiel la aktiva objekto.
• from: La indekso de la aktuala ero
• to: La indekso de la sekva ero

Ĉiuj karuselaj eventoj estas pafitaj ĉe la karuselo mem (te ĉe la <div class="carousel">).

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