Source

Carousel

Bangaren nunin faifai don yin keke ta hanyar abubuwa-hotuna ko nunin faifai na rubutu-kamar carousel.

Yadda yake aiki

Carousel nunin nunin faifai ne don yin keke ta hanyar jerin abubuwan ciki, wanda aka gina tare da canza canjin CSS 3D da ɗan JavaScript. Yana aiki tare da jerin hotuna, rubutu, ko alamar al'ada. Hakanan ya haɗa da goyan baya don sarrafawa na baya/na gaba da masu nuni.

A cikin masu bincike inda API ɗin Visibility Page ke samun goyan bayan, carousel ɗin zai guje wa zamewa lokacin da shafin yanar gizon ba ya ga mai amfani (kamar lokacin da shafin yanar gizon ba ya aiki, an rage girman taga mai lilo, da sauransu).

Tasirin raye-rayen wannan bangaren ya dogara ne da prefers-reduced-motiontambayar kafofin watsa labarai. Dubi raguwar sashin motsi na takaddun damar mu .

Da fatan za a sani cewa ba a tallafawa carousels na gida, kuma carousels gabaɗaya ba sa bin ka'idodin samun dama.

A ƙarshe, idan kuna gina JavaScript ɗin mu daga tushe, yana buƙatarutil.js .

Misali

Carousels ba sa daidaita girman faifai ta atomatik. Don haka, ƙila kuna buƙatar amfani da ƙarin kayan aiki ko salo na musamman don girman abun ciki daidai. Yayin da carousels ke goyan bayan sarrafawa na baya/na gaba da masu nuni, ba a buƙatar su a sarari. Ƙara ku keɓance yadda kuka ga dama.

Ana .activebuƙatar ƙara ajin zuwa ɗaya daga cikin nunin faifai in ba haka ba ba za a iya ganin carousel ba. Hakanan tabbatar da saita ID na musamman akan .carouselikon sarrafawa na zaɓi, musamman idan kuna amfani da carousels da yawa akan shafi ɗaya. Abubuwan sarrafawa da masu nuna alama dole ne su kasance da data-targetsifa (ko hrefdon hanyoyin haɗin gwiwa) waɗanda suka dace da id na .carouselkashi.

Slides kawai

Anan ga carousel mai nunin faifai kawai. Yi la'akari da kasancewar .d-blockkuma .w-100akan hotunan carousel don hana daidaitaccen hoton burauza.

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

Tare da sarrafawa

Ƙara a cikin abubuwan sarrafawa na baya da na gaba:

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

Tare da alamomi

Hakanan zaka iya ƙara masu nuni zuwa carousel, tare da sarrafawa, ma.

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

Tare da rubutun kalmomi

Ƙara taken magana a cikin nunin faifan ku cikin sauƙi tare da abin da .carousel-captionke cikin kowane .carousel-item. Ana iya ɓoye su cikin sauƙi a kan ƙananan wuraren kallo, kamar yadda aka nuna a ƙasa, tare da kayan aikin nuni na zaɓi . Muna ɓoye su da farko tare .d-noneda dawo da su akan na'urori masu matsakaicin girma tare da .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

Ƙara .carousel-fadezuwa carousel ɗin ku zuwa nunin faifai mai rai tare da ɓata lokaci maimakon nunin faifai.

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

Ƙara data-interval=""zuwa .carousel-itemdon canza adadin lokacin jinkirta tsakanin yin keke ta atomatik zuwa abu na gaba.

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

Amfani

Ta hanyar bayanan halayen

Yi amfani da sifofin bayanai don sarrafa matsayin carousel cikin sauƙi. data-slideyana karɓar kalmomin maɓalli prevko next, wanda ke canza matsayi na faifai dangane da matsayinsa na yanzu. A madadin, yi amfani data-slide-toda don ƙaddamar da ɗanyen fihirisar zamewa zuwa carousel data-slide-to="2", wanda ke canza wurin zamewar zuwa wani fihirisar takamammen farawa da 0.

Ana data-ride="carousel"amfani da sifa don yiwa carousel alama azaman mai rai wanda ya fara daga nauyin shafi. Idan baka yi amfani data-ride="carousel"da fara fara carousel ɗinka ba, dole ne ka fara da kanka. Ba za a iya amfani da shi a haɗe tare da (m kuma ba dole ba) bayyanannen farawar JavaScript na carousel iri ɗaya.

Ta hanyar JavaScript

Kira carousel da hannu tare da:

$('.carousel').carousel()

Zabuka

Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-, kamar a cikin data-interval="".

Suna Nau'in Default Bayani
tazara lamba 5000 Adadin lokacin jinkirta tsakanin yin keke ta atomatik abu. Idan karya, carousel ba zai sake zagayawa ta atomatik ba.
keyboard boolean gaskiya Ko carousel ya kamata ya mayar da martani ga abubuwan da suka faru na madannai.
dakatarwa zaren | boolean "tsayawa"

Idan an saita zuwa "hover", dakatar da hawan keke na carousel a kunne mouseenterkuma ya dawo da keken carousel akan mouseleave. Idan an saita zuwa false, shawagi akan carousel ba zai dakata da shi ba.

A kan na'urori masu kunna taɓawa, lokacin da aka saita zuwa "hover", hawan keke zai dakata a kunne touchend(da zarar mai amfani ya gama hulɗa da carousel) na tazara biyu, kafin a ci gaba ta atomatik. Lura cewa wannan ƙari ne ga halayen linzamin kwamfuta na sama.
hau kirtani karya Yana kunna carousel ta atomatik bayan mai amfani ya zagaya abu na farko da hannu. Idan "carousel", yana kunna carousel a kan kaya.
kunsa boolean gaskiya Ko carousel ya kamata a ci gaba da zagayawa ko kuma yana da tasha.
taba boolean gaskiya Ko carousel ya kamata ya goyi bayan mu'amalar shuɗewar hagu/dama akan na'urorin allo.

Hanyoyin

Hanyoyi masu daidaitawa da canji

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

.carousel(options)

Initializes the carousel with an optional options object and starts cycling through items.

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

.carousel('cycle')

Cycles through the carousel items from left to right.

.carousel('pause')

Stops the carousel from cycling through items.

.carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array). Returns to the caller before the target item has been shown (i.e. before the slid.bs.carousel event occurs).

.carousel('prev')

Cycles to the previous item. Returns to the caller before the previous item has been shown (i.e. before the slid.bs.carousel event occurs).

.carousel('next')

Cycles to the next item. Returns to the caller before the next item has been shown (i.e. before the slid.bs.carousel event occurs).

.carousel('dispose')

Destroys an element’s carousel.

Events

Bootstrap’s carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties:

  • direction: The direction in which the carousel is sliding (either "left" or "right").
  • relatedTarget: The DOM element that is being slid into place as the active item.
  • from: The index of the current item
  • to: The index of the next item

All carousel events are fired at the carousel itself (i.e. at the <div class="carousel">).

Event Type Description
slide.bs.carousel Wannan taron yana buɗewa nan da nan lokacin da slideaka kira hanyar misali.
slid.bs.carousel Ana korar wannan taron lokacin da carousel ya gama ƙaddamar da zamewar sa. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

Canza lokacin canji

.carousel-itemZa'a iya canza tsawon lokacin miƙa mulki tare da $carousel-transitioncanjin Sass kafin haɗawa ko salo na al'ada idan kuna amfani da haɗakarwar CSS. Idan an yi amfani da sauye-sauye da yawa, tabbatar da an bayyana canjin canji da farko (misali transition: transform 2s ease, opacity .5s ease-out).