Source

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

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.

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.

Li-slide feela

Ke ena carousel e nang le li-slide feela. Ela hloko boteng ba litšoantšo .d-blockle .img-fluidli-carousel ho thibela ho lumellana ha setšoantšo sa kamehla.

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

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

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 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>
Ho hlokahala ntho ea pele e sebetsang

Sehlopha .activese hloka ho kenyelletsoa ho e 'ngoe ea li-slide. Ho seng joalo, carousel e ke ke ea bonahala.

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.

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</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. 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 mouseenterebe e ntshetsapele 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 libaesekele ho tla emisa touchend(hang ha mosebelisi a qeta 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.

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 slidemokhoa 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…
})