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

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 class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
</div>

Ka taolo

Ho kenyelletsa litaolo tse fetileng le tse latelang:

E fetileng E 'ngoe

<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=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" 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.

E fetileng E 'ngoe

<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=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" 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>

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.

E fetileng E 'ngoe

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

Crossfade

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

E fetileng E 'ngoe

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </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>

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="".

Mekhoa

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

$('#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).