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

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

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

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

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.

Alamar zamewar farko

Nulla vitae elit libero, a pharetra augue mollis interdum.

Alamar zamewa ta biyu

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Alamar zamewa ta uku

Kyakkyawan commodo cursus magna, velsselerisque nisl consectetur.

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

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. 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 `mouseenter`kuma 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.

Hanyoyin

Hanyoyi masu daidaitawa da canji

Duk hanyoyin API ba daidai ba ne kuma suna fara canji . Suna komawa ga mai kiran da zarar an fara canji amma kafin ya ƙare . Bugu da ƙari, za a yi watsi da kiran hanya akan ɓangaren canji .

Duba takaddun JavaScript ɗin mu don ƙarin bayani.

`.carousel(options)`

Ya fara carousel tare da zaɓin zaɓi objectkuma ya fara hawan keke ta abubuwa.

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

`.carousel('cycle')`

Yana zagayawa cikin abubuwan carousel daga hagu zuwa dama.

`.carousel('pause')`

Yana dakatar da carousel daga yin keke ta cikin abubuwa.

`.carousel(number)`

Yana kewaya carousel zuwa wani firam na musamman (0 tushen, kama da tsararru). Komawa ga mai kira kafin a nuna abin da ake nufi (watau kafin slid.bs.carouselabin ya faru).

`.carousel('prev')`

Kewaya zuwa abu na baya. Komawa ga mai kira kafin a nuna abin da ya gabata (watau kafin slid.bs.carouselabin ya faru).

`.carousel('next')`

Kewaya zuwa abu na gaba. Komawa ga mai kira kafin a nuna abu na gaba (watau kafin slid.bs.carouselabin ya faru).

`.carousel('dispose')`

Yana lalata carousel na wani abu.

Abubuwan da suka faru

Ajin carousel na Bootstrap yana fallasa abubuwa biyu don haɗawa cikin ayyukan carousel. Duk abubuwan biyu suna da ƙarin kaddarorin masu zuwa:

direction: Hanyar da carousel ke zamewa (ko dai "left") "right".
relatedTarget: Abubuwan DOM da ake zamewa cikin wuri azaman abu mai aiki.
from: Ma'anar abin da ke yanzu
to: Fihirisar abu na gaba

Duk abubuwan da suka faru na carousel ana harba su a kan carousel kanta (watau a <div class="carousel">).

Nau'in Taron	Bayani
slide.bs.carousel	Wannan taron yana buɗewa nan da nan lokacin da `slide`aka 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).