Carousel

A slideshow component ut revolutio per elementa-imagines vel labitur textus - sicut carousel.

Quomodo facitur

Carousel est slideshow pro cycling per seriem contentorum, constructum cum CSS 3D transformat et frenum JavaScript. Cum imaginum serie, textu, vel usu notae laborat. Etiam subsidia includunt per regulas proximas et indices priorum/posterum.

In navigatoribus ubi visibilitas Page API sustentatur, carousel illapsum vitabit cum pagina telaris usoris non apparet (ut cum tab navigatio iners est, fenestra navigatrum elevat, etc.).

Effectus animationis huius componentis dependet ex prefers-reduced-motioninterrogatione instrumentorum. Vide de reducto motu sectionem accessibilitatis nostrae documentationis .

Quaeso scias quod carousellae nidificantes non sustinentur, et carousels plerumque non obtemperant signis accessibilitatis.

Postremo, si JavaScript a fonte aedificas, postulatutil.js .

Exemplum

Carousels non automatice slide dimensionibus normalize. Quale, necesse est uti adiectis utilitatibus vel stylis consuetudinibus ad convenientes amplitudines contentis. Dum carousels sustinent praecedens / proximas potestates et indices, non explicite requiritur. Adde et mos ut tibi videbitur.

Classes .activeadiciendas uni e labiis aliter carousel visibiles non erunt. Etiam scito singularem id de .carouselimperio ad libitum constituere, praesertim si pluribus carousellis in una pagina uteris. Imperium et indicator elementa debent habere data-targetattributum (vel hrefpro nexus) quod congruit id .carouselelementi.

Labitur nisi

Lorem carousel cum labitur solum. Nota praesentiam .d-blocket .w-100imagines carousel ne pasco alignment imaginem defaltam.

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

Cum controls

Addens in praecedente et sequenti regens;

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

Cum indicibus

Indices ad carousel etiam addere potes, e regione moderaminum etiam.

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

Cum captions

Captiones ad tuas facile labitur cum .carousel-captionelemento in aliquo .carousel-item. Facile abscondi possunt in minoribus opinionibus, ut infra, cum utilitates libitum ostensionis . Eos initio occultamus .d-noneet reducimus ad machinas mediocres cum .d-md-block.

Primum slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Secundus slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tertius slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur ut.

<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

Adde .carousel-fadead carousel tuum ad animandum labitur cum fade transitus loco lapsus.

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

Singula `.carousel-item`intervalla

Adde data-interval=""ad .carousel-itemmutare spatium morae inter sponte cyclica ad proximum item.

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

Consuetudinem

Via data attributa

Usus notitia attribuit facilem positionem carousel moderari. keywords vel data-slideacceptat , quae situm lapsus mutat respectu eius positionis currentis. Vel , utere ut index lapsus crudum ad carousel transire , quod positio lapsus transfert ad indicem particularem incipientem .prevnextdata-slide-todata-slide-to="2"0

Proprium data-ride="carousel"carousel notare adhibetur ut in onere paginae incipiens animans. data-ride="carousel"Si carousel tuum initialize non uteris , hoc ipsum habes ut initializes. In compositione cum (superfluis et superfluis) adhiberi non potest expressa JavaScript initialization eiusdem carousel.

Via JavaScript

Manually vocate carousel est:

$('.carousel').carousel()

Optiones

Optiones transigi possunt per data attributa vel JavaScript. Data enim attributa, adiungunt optionis nomen data-, ut in data-interval="".

Nomen	Type	Default	Descriptio
intervallum	numerus	5000	Moles temporis inter morandi automatice revolutio item. Si falsum, carousel non sponte currendi.
tincidunt	Boolean	verum	Utrum carousel agere debet claviaturae eventus.
mora	string \| Boolean	"hve"	Si `"hover"`adposita, cyclum carousel insistit `mouseenter`et cyclum carousel in resumit `mouseleave`. Si paro `false`, super carousel non morabitur. De machinis tactus parabilibus, cum `"hover"`addictis, cyclus in mora `touchend`(semel utentis cum carousel peractum est) per duo intervalla, antequam sponte resumatur. Nota quod hoc est praeter mores supradictos murem.
equitare	filum	falsus	Autoplays carousel post usoris cyclum primum item. Si "carousel", autoplays carousel in onere.
wrap	Boolean	verum	Utrum carousel debet continue cyclum vel duras clausuras habere.
tactus	Boolean	verum	Utrum carousel sustineat sinistram / ius swipe interactiones in touchscreen machinis.

Methodi

Modi asynchronous et transitus

Omnes API modi asynchroni sunt et transitus committitur . Redeunt ad RECENS mox ut transitus incipiat sed antequam finiatur . Methodus praeterea in transitus transeuntis ignorabitur .

See our JavaScript documentation for more information .

`.carousel(options)`

Initializes carousel cum optionibus ad libitum objectet incipit cyclum per item.

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

`.carousel('cycle')`

Cycles per carousel res a sinistra in dextram.

`.carousel('pause')`

Sistit a revolutio per items carousel.

`.carousel(number)`

Cycles carousel ad figmentum particulare (0 fundatum, similis ordinationi). Recurrit ad scopum item ostensum est antequam RECENS (id est antequam slid.bs.carouselres incidit).

`.carousel('prev')`

Cycli ad priorem item. RECENS REcurrit ante ostensum est prius item (id ante slid.bs.carouseleventum).

`.carousel('next')`

Cycli ad proximum item. RECENS REcurrit ante proximum item ostensum est (id ante slid.bs.carouseleventum occurrit).

`.carousel('dispose')`

Carousel elementum destruit.

Events

Classis carousel Bootstrap duos eventus exponit pro hamo in carousel functionality. Utraque certe proprietates sequentes adiectis habent;

directionDirectio in qua carousel est inclinatus (vel "left"vel "right").
relatedTarget: dom elementum quod est lapsus in locum activum item.
from: Index hodiernae item
to: Index sequentis item

Omnes eventus carousel accenduntur ad ipsum carousel (i. e. ad <div class="carousel">).

Event Type	Descriptio
slide.bs.carousel	Huius rei accendit statim cum `slide`instantia methodus invocatur.
slid.bs.carousel	Eventus hic accensus est cum carousel lapsus transitum explevit.

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

Mutatio transitus tempus

Transitus durationis rerum .carousel-itemmutari potest cum $carousel-transitionSass variabilis antequam stilos componant vel morem adhibeas si CSS compilata es. Si plures transitiones applicantur, fac ut transitus transformationis prius definiatur (gr. transition: transform 2s ease, opacity .5s ease-out).