Source

Carousel

Ngwa ihe ngosi mmịfe maka ịnya igwe site na ọcha — onyonyo ma ọ bụ slide ederede — dị ka carousel.

Ka o si arụ ọrụ

Carousel bụ ihe ngosi mmịfe maka ịgba ígwè site na usoro ọdịnaya, nke ejiri mgbanwe CSS 3D wuo yana ntakịrị Javascript. Ọ na-arụ ọrụ na usoro onyonyo, ederede, ma ọ bụ akara aha omenala. Ọ gụnyekwara nkwado maka njikwa gara aga/ na-esote yana egosi.

N'ihe nchọgharị ebe a na-akwado API Visibility Page , carousel ga-ezere slide mgbe onye ọrụ anaghị ahụ ibe weebụ (dị ka mgbe taabụ nchọgharị anaghị arụ ọrụ, ebelata windo ihe nchọgharị, wdg).

Biko mara na anaghị akwado carousels akwụ ụgwọ, yana carousels anaghị agbaso ụkpụrụ nnweta.

N'ikpeazụ, ọ bụrụ na ị na-ewu Javascript anyị site na isi iyi, ọ chọrọutil.js .

Ọmụmaatụ

Carousels anaghị emegharị akụkụ slide ozugbo. Dị ka nke a, ị nwere ike ịchọ iji ngwa ngwa ma ọ bụ ụdị ahaziri ahazi iji wepụta ọdịnaya nke ọma. Ọ bụ ezie na carousels na-akwado njikwa gara aga/na-esote na egosi, a chọghị ha n'ụzọ doro anya. Tinye ma hazie ka ọ dị gị mma.

Ekwesịrị .activeịgbakwunye klas ahụ n'otu n'ime ihe nkiri ahụ ma ọ bụghị na carousel agaghị ahụ anya. Jide n'aka na ịtọọ id pụrụ iche na .carouselnjikwa nhọrọ, ọkachasị ma ọ bụrụ na ị na-eji ọtụtụ carousels n'otu ibe. Ihe njikwa na egosi ga-enwerịrị njiri mara data-target(ma ọ bụ hrefmaka njikọ) dabara na id nke .carouselmmewere.

Naanị ihe mmịfe

Nke a bụ carousel nwere naanị slide. Rịba ama ọnụnọ nke .d-blockna .w-100foto carousel iji gbochie ndakọrịta ihe nchọgharị ndabere ndabere.

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

Na njikwa

Na-agbakwụnye na njikwa gara aga na nke na-esote:

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

Na egosi

Ịnwekwara ike ịgbakwunye ihe ngosi na carousel, n'akụkụ njikwa, kwa.

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

Site na nkọwa okwu

Tinye nkọwa okwu na slide gị n'ụzọ dị mfe na .carousel-captionmmewere dị n'ime nke ọ bụla .carousel-item. Enwere ike zoo ha n'ụzọ dị mfe na obere nlele, dị ka egosiri n'okpuru ebe a, yana ihe ngosi nhọrọ . Anyị na-eji ezobe ha na mbụ .d-nonewee weghachi ha na ngwaọrụ ndị nwere ọkara .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>

Crossfade

Tinye .carousel-fadena carousel gị ka ọ na-eme ihe nkiri slide nwere mgbanwe na-ada ada kama slide.

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

Ojiji

Site na njirimara data

Jiri njirimara data iji jikwaa ọnọdụ carousel ngwa ngwa. data-slidena-anabata mkpụrụokwu prevma ọ bụ next, nke na-agbanwe ọnọdụ slide dabere na ọnọdụ ya ugbu a. N'aka nke ọzọ, jiri data-slide-toiji nyefee akara ngosi mmịfe raw na carousel data-slide-to="2", nke na-atụgharị ọnọdụ mmịfe ahụ gaa n'otu ndeksi malite na 0.

A data-ride="carousel"na-eji njirimara ahụ akara carousel ka ọ na-amalite na ibu ibe. Enweghị ike iji ya na (nke na-adịghị mkpa na enweghị isi) mmalite Javascript doro anya nke otu carousel.

Site na Javascript

Jiri aka kpọọ carousel:

$('.carousel').carousel()

Nhọrọ

Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-, dị ka ọ dị na data-interval="".

Aha Ụdị Ọdabara Nkọwa
etiti oge nọmba 5000 Ogologo oge igbu oge n'etiti ịnya igwe na-akpaghị aka. Ọ bụrụ na ụgha, carousel agaghị agba okirikiri na-akpaghị aka.
ahụigodo boolean eziokwu Ma carousel kwesịrị imeghachi omume na mmemme ahụigodo.
kwụsịtụ eriri | boolean "hover"

Ọ bụrụ na ịtọ ya "hover", kwụsịtụ ịgba ígwè nke carousel mouseenterma maliteghachi ịgba ígwè nke carousel na mouseleave. Ọ bụrụ na ịtọ ya false, ịfegharị n'elu carousel agaghị akwụsịtụ ya.

Na ngwaọrụ enyere aka, mgbe atọrọ na "hover", ịgba ígwè ga-akwụsịtụ touchend(otu oge onye ọrụ ya na carousel na-emekọrịta ihe) maka nkeji abụọ, tupu ịmaliteghachi ozugbo. Rịba ama na nke a bụ mgbakwunye na omume òké dị n'elu.
gbaa eriri ụgha Na-egwu carousel na-akpaghị aka mgbe onye ọrụ jiri aka gbachie ihe mbụ. Ọ bụrụ na "carousel", na-egwu carousel na ibu.
kechie boolean eziokwu Ma carousel kwesịrị ịnya okirikiri ma ọ bụ nwee nkwụsị siri ike.

Ụzọ

Ụzọ asynchronous na ntụgharị

Ụzọ API niile enweghị atụ wee malite mgbanwe . Ha na-alaghachikwuru onye na-akpọ oku ozugbo mgbanwe ahụ malitere mana tupu ya akwụsị . Na mgbakwunye, a ga-eleghara oku usoro na mpaghara mgbanwe anya .

Hụ akwụkwọ Javascript anyị maka ozi ndị ọzọ.

.carousel(options)

Na-ebute carousel na nhọrọ nhọrọ objectwee malite ịnya igwe site na ihe.

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

.carousel('cycle')

Na-agagharị na ihe carousel site n'aka ekpe gaa n'aka nri.

.carousel('pause')

Na-akwụsị carousel site n'ịgba ígwè na ihe.

.carousel(number)

Na-eme okirikiri carousel gaa n'otu etiti (0 dabere, yiri n'usoro). Na-alaghachikwute onye na-akpọ oku tupu egosiri ihe ezubere iche (ya bụ, tupu slid.bs.carouselmmemme emee).

.carousel('prev')

Ọkpụkpụ gaa na ihe gara aga. Na-alaghachikwute onye na-akpọ oku tupu egosiri ihe gara aga (ya bụ tupu slid.bs.carouselmmemme emee).

.carousel('next')

Chọgharịa gaa na ihe na-esote. Na-alaghachikwute onye na-akpọ oku tupu egosiri ihe na-esote (ya bụ tupu slid.bs.carouselmmemme emee).

.carousel('dispose')

Na-ebibi carousel nke element.

Ihe omume

Klas carousel Bootstrap na-ekpughe ihe omume abụọ maka itinye aka na ọrụ carousel. Ihe omume abụọ a nwere ihe mgbakwunye ndị a:

  • direction: Ntuziaka nke carousel na-amị amị (ma "left"ọ bụ "right").
  • relatedTarget: Ihe DOM nke a na-agbanye n'ime ebe dị ka ihe na-arụ ọrụ.
  • from: Ndekọ nke ihe dị ugbu a
  • to: Ndekọ ihe na-esote

A na-agbapụ ihe omume carousel niile na carousel n'onwe ya (ya bụ na <div class="carousel">).

Ụdị mmemme Nkọwa
slide.bs.carousel Ihe omume a na-agba ọkụ ozugbo slidea kpọkuru usoro ihe atụ.
slid.bs.carousel A na-agbapụ ihe omume a mgbe carousel mechachara mgbanwe slide ya. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Gbanwee oge mgbanwe

.carousel-itemEnwere ike iji mgbanwe Sass gbanwee ogologo oge $carousel-transitionmgbanwe tupu ị chịkọta ma ọ bụ ụdị omenala ma ọ bụrụ na ị na-eji CSS achịkọtara. Ọ bụrụ na etinyere ọtụtụ mgbanwe, hụ na a kọwapụtara mgbanwe mgbanwe na mbụ (dịka ọmụmaatụ transition: transform 2s ease, opacity .5s ease-out).