Carousel

Karolo ea li-slideshow bakeng sa ho tsamaea ka libaesekele-litšoantšo kapa li-slide tsa mongolo-joaloka carousel.

Kamoo e sebetsang kateng

Carousel ke slideshow ea ho palama libaesekele ka har'a letoto la litaba, e hahiloeng ka li-transform tsa CSS 3D le JavaScript e nyane. E sebetsa ka letoto la litšoantšo, mongolo, kapa letšoao la tloaelo. E boetse e kenyelletsa tšehetso bakeng sa litsamaiso tse fetileng / tse latelang le matšoao.

Ho li-browser moo API ea Ponahalo ea Leqephe e tšehelitsoeng, carousel e tla qoba ho thella ha leqephe la webo le sa bonahale ho mosebelisi (joalo ka ha sebatli se sa sebetse, fensetere ea sebatli e fokotsehile, joalo-joalo).

Liphetho tsa animation tsa karolo ena li ipapisitse le prefers-reduced-motionpotso ea media. Sheba karolo e fokolitsoeng ea motsamao oa litokomane tsa phihlello ea rona .

Ka kopo hlokomela hore li-carousels tse kentsoeng lihlaheng ha li tšehetsoe, 'me li-carousels hangata ha li tsamaellane le maemo a phihlello.

Qetellong, haeba u theha JavaScript ea rona ho tsoa mohloling, e hlokautil.js .

Mohlala

Li-carousels ha li iketsetse litekanyo tsa li-slide ka botsona. Ka hona, ho ka 'na ha hlokahala hore u sebelise lisebelisoa tse eketsehileng kapa mekhoa e tloaelehileng ho etsa boholo bo nepahetseng. Leha li-carousel li tšehetsa litsamaiso le matšoao a fetileng/tse latelang, ha li hlokehe ka ho hlaka. Eketsa 'me u iketsetse kamoo u bonang ho loketse kateng.

Sehlopha .activese hloka ho kenyelletsoa ho e 'ngoe ea li-slide ho seng joalo carousel e ke ke ea bonahala. Hape etsa bonnete ba hore u beha id e ikhethang ho .carouselli-control tseo u ka li khethang, haholo-holo haeba u sebelisa li-carousel tse ngata leqepheng le le leng. Taolo le likarolo tsa matšoao li tlameha ho ba le data-targettšobotsi (kapa hrefbakeng sa lihokelo) tse tsamaellanang le id ea .carouselelement.

Li-slide feela

Ke ena carousel e nang le li-slide feela. Ela hloko boteng ba litšoantšo tsa carousel .d-blockle .w-100tsa carousel ho thibela tlhophiso ea setšoantšo sa kamehla.

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

Ka taolo

Kenyelletsa litaolo tse fetileng le tse latelang:

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

Ka matšoao

U ka boela ua eketsa matšoao ho carousel, hammoho le litsamaiso, hape.

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

Ka litlhaloso

Kenya litlhaloso ho li-slide tsa hau habonolo ka .carousel-captionkarolo e ka har'a .carousel-item. Li ka patoa habonolo libakeng tse nyane tsa pono, joalo ka ha ho bonts'itsoe ka tlase, ka lisebelisoa tsa boikhethelo . Re li pata qalong ka .d-nonele ho li khutlisetsa ka lisebelisoa tsa boholo bo mahareng tse nang le .d-md-block.

Leibole ea pele ea li-slide

Nulla vitae elit libero, pharetra augue mollis interdum.

Label ea bobeli ea li-slide

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Leibole ea boraro ea li-slide

E shebahala e le ntle haholo, ha e le hantle, ha e na letho.

<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

Eketsa .carousel-fadeho carousel ea hau ho phelisa li-slide ka ho fifala ho e-na le li-slide.

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

`.carousel-item`Nako ea motho ka mong

Kenya data-interval=""ho a .carousel-itemho fetola nako ea ho lieha pakeng tsa ho palama baesekele ka bo eona ho ea nthong e latelang.

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

Tšebeliso

Ka litšobotsi tsa data

Sebelisa litšobotsi tsa data ho laola boemo ba carousel habonolo. data-slidee amohela mantsoe a sehlooho prevkapa next, e fetolang boemo ba slide ho ipapisitse le boemo ba hona joale. Ntle le moo, sebelisa data-slide-toho fetisa index ea li-slide e tala ho carousel data-slide-to="2", e fetolang boemo ba li-slide ho index e itseng e qalang ka 0.

Tšobotsi data-ride="carousel"e sebelisoa ho tšoaea carousel e le e phelang ho qala ka palo ea maqephe. Haeba u sa sebelise data-ride="carousel"ho qala carousel ea hau, u tlameha ho e qala ka bouena. E ke ke ea sebelisoa hammoho le (ho sa hlokahale le ho sa hlokahale) ho qalisoa ka ho hlaka ha JavaScript ea carousel e tšoanang.

Ka JavaScript

Letsetsa carousel ka letsoho ka:

$('.carousel').carousel()

Dikgetho

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-, joalo ka data-interval="".

Lebitso	Mofuta	Ea kamehla	Tlhaloso
karohano	palo	5000	Nako ea ho lieha pakeng tsa ho palama ntho ka bo eona. Haeba e le leshano, carousel e ke ke ea potoloha ka bo eona.
keyboard	boolean	'nete	Hore na carousel e lokela ho arabela liketsahalong tsa keyboard.
kgefutsa	khoele \| boolean	"tsamaea"	Ha e setetswe ho `"hover"`, e emisa ho palama baesekele ya carousel `mouseenter`ebe e ntshetsa pele baesekele ya carousel ka `mouseleave`. Haeba e setiloe ho `false`, ho soaela holim'a carousel ho ke ke ha e emisa. Lisebelisoa tse lumelletsoeng ho ama, ha li setiloe ho `"hover"`, ho palama baesekele ho tla emisa `touchend`(hang ha mosebelisi a qetile ho sebelisana le carousel) ka linako tse peli, pele e qala hape ka bo eona. Hlokomela hore sena se tlatselletsa boitšoarong bo kaholimo ba toeba.
palama	khoele	bohata	E bapala carousel ka mor'a hore mosebelisi a potolohe ntho ea pele. Haeba "carousel", e bapala carousel ka ho toba.
thatela	boolean	'nete	Hore na carousel e lokela ho potoloha ka ho sa feleng kapa e eme ka thata.
thetsa	boolean	'nete	Hore na carousel e lokela ho ts'ehetsa litšebelisano tsa swipe ka ho le letšehali / ka ho le letona ho lisebelisoa tsa sekirini sa ho ama.

Mekhoa

Mekhoa ea Asynchronous le liphetoho

Mekhoa eohle ea API ha e- synchronous 'me e qala phetoho . Ba khutlela ho motho ea letselitseng hang ha phetoho e qala empa pele e fela . Ho feta moo, mohala oa mokhoa ho karolo ea phetoho o tla hlokomolohuoa .

Sheba litokomane tsa rona tsa JavaScript bakeng sa lintlha tse ling .

`.carousel(options)`

E qala carousel ka khetho ea boikhethelo objectebe e qala ho palama lintho.

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

`.carousel('cycle')`

E potoloha ka har'a lintho tsa carousel ho tloha ho le letšehali ho ea ho le letona.

`.carousel('pause')`

E emisa carousel ho palama baesekele ka har'a lintho.

`.carousel(number)`

E potoloha carousel ho foreime e itseng (0 e thehiloeng, e ts'oanang le lethathamo). E khutlela ho motho ea letselitseng pele ntho e lebisitsoeng e bontšoa (ke hore pele slid.bs.carouselketsahalo e etsahala).

`.carousel('prev')`

Lipotoloho ho ea nthong e fetileng. E khutlela ho moletsi pele ntho e fetileng e bontšoa (ke hore pele slid.bs.carouselketsahalo e etsahala).

`.carousel('next')`

Lipotoloho ho ea nthong e latelang. E kgutlela ho moletsi pele ntho e latelang e bontshwa (ke hore pele slid.bs.carouselketsahalo e etsahala).

`.carousel('dispose')`

E senya carousel ea element.

Liketsahalo

Sehlopha sa carousel sa Bootstrap se pepesa liketsahalo tse peli tsa ho hokahana le ts'ebetso ea carousel. Liketsahalo tsena ka bobeli li na le litšobotsi tse latelang:

direction: Tsela eo carousel e thellang ho eona (ebang ke "left"kapa "right").
relatedTarget: Karolo ea DOM e ntseng e theoleloa sebakeng e le eona ntho e sebetsang.
from: Lenane la ntho ea hajoale
to: Lenane la ntho e latelang

Liketsahalo tsohle tsa carousel li thunngoa ho carousel ka boeona (ke hore ho <div class="carousel">).

Mofuta oa Ketsahalo	Tlhaloso
slide.bs.carousel	Ketsahalo ena e tuka hang hang ha `slide`mokhoa oa mohlala o sebelisoa.
slid.bs.carousel	Ketsahalo ena e thunngoa ha carousel e phethela phetoho ea eona ea li-slide.

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

Fetola nako ea phetoho

Nako ea phetoho e .carousel-itemka fetoloa ka mofuta oa $carousel-transitionSass pele o hlophisa kapa mekhoa ea tloaelo haeba o sebelisa CSS e hlophisitsoeng. Haeba ho sebelisoa liphetoho tse ngata, etsa bonnete ba hore phetoho ea phetoho e hlalosoa pele (mohlala. transition: transform 2s ease, opacity .5s ease-out).