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

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.

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.

Naanị ihe mmịfe

Nke a bụ carousel nwere naanị slide. Rịba ama ọnụnọ nke .d-blockna .img-fluidfoto 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="..." 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>

Na njikwa

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

Nke gara aga Osote

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

Na egosi

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

Nke gara aga Osote

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

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.

Akara slide mbụ

Nulla vitae elit libero, a pharetra augue mollis interdum.

Akara slide nke abụọ

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Akara ngosi mmịfe nke atọ

Praesent commodo cursus magna, vel selerisque nisl consectetur.

Nke gara aga Osote

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

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

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