in English

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 na musamman idakan abubuwan .carouselsarrafawa 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 idda .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. Muna ba da shawarar yin amfani <button>da abubuwa, amma kuma kuna iya amfani <a>da abubuwa tare da role="button".

<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>
 <button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</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>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</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>Some representative placeholder content for the first slide.</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>Some representative placeholder content for the second slide.</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>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Crossfade

Ƙara .carousel-fadezuwa carousel ɗin ku zuwa nunin faifai mai rai tare da ɓata lokaci maimakon nunin faifai. Ya danganta da abun cikin carousel ɗin ku (misali, rubutu kawai nunin faifai), ƙila za ku so ƙara .bg-bodyko wasu CSS na al'ada zuwa .carousel-items don daidaitaccen ƙetare.

<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>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleFade" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</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>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleInterval" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Kashe taɓa taɓawa

Carousels suna goyan bayan swiping hagu/dama akan na'urorin allo don matsawa tsakanin nunin faifai. Ana iya kashe wannan ta amfani da data-touchsifa. Misalin da ke ƙasa kuma baya haɗa da data-ridesifa kuma yana da data-interval="false"don haka baya kunna kai tsaye.

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-interval="false">
  <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>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</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 false, carousel ba zai zagaya 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 an saita zuwa 'carousel', yana kunna carousel ta atomatik akan lodi.
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

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.

.carousel('nextWhenVisible')

Kar a sake zagayowar carousel zuwa gaba lokacin da ba a ganin shafin ko carousel ko iyayensa ba a iya gani. Komawa ga mai kira kafin a nuna abu na gaba (watau kafin slid.bs.carouselabin ya faru).

.carousel('to')

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

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