Source

Carousel

Ngwa ihe ngosi mmịfe maka ịgba ígwè site na ọcha—onyinyo ma ọ bụ slides nke 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'ime ihe nchọgharị ebe a na-akwado API Visibility Page , carousel ga-ezere mbanye mgbe onye ọrụ na-ahụghị ibe weebụ (dị ka mgbe taabụ nchọgharị anaghị arụ ọrụ, ebelata windo ihe nchọgharị, wdg).

Mmetụta animation nke akụrụngwa a dabere na prefers-reduced-motionajụjụ mgbasa ozi. Hụ akụkụ ngagharị ewelatala nke akwụkwọ nnweta anyị .

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

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

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

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

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

Tinye data-interval=""na a .carousel-itemiji gbanwee oge ị ga-egbu oge n'etiti ịgba ígwè na-akpaghị aka gaa na ihe ọzọ.

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

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. Ọ bụrụ na ị naghị eji data-ride="carousel"mmalite carousel gị, ị ga-amalite ya n'onwe gị. Enweghị ike iji ya na (nke na-adịghị mkpa na enweghị isi) mmalite Javascript doro anya nke otu carousel.

Site 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.
imetụ aka boolean eziokwu Ma carousel kwesịrị ịkwado mmekọrịta swipe aka ekpe/aka nri na ngwaọrụ ihuenyo mmetụ aka.

Ụ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

Enwere ike ịgbanwe oge mgbanwe .carousel-itemsite na $carousel-transitionmgbanwe Sass tupu achị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).