Tsallake zuwa babban abun ciki Tsallake zuwa kewayawa na takardu
Check
in English

Carousel

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

A wannan shafi

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 alama na 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 baya bin ka'idodin samun dama.

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

html 
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-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".

html 
<div id="carouselExampleControls" class="carousel slide" data-bs-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-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Tare da alamomi

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

html 
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">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.

html 
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">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.

html 
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-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-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

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

html 
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-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-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">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-bs-touchsifa. Misalin da ke ƙasa kuma baya haɗa da data-bs-ridesifa don haka ba zai kunna kai tsaye ba.

html 
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="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-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Bambancin duhu

Ƙara .carousel-darkzuwa .carouseldon sarrafawa masu duhu, alamomi, da rubutun kalmomi. An juyar da sarrafawa daga farkon farin cikarsu tare da filterkadarorin CSS. Kalmomi da sarrafawa suna da ƙarin masu canji na Sass waɗanda ke keɓancewa colorda background-color.

html 
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <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" data-bs-interval="2000">
      <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-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Canjin al'ada

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

Sass

Masu canji

Bambance-bambance ga duk carousels:

$carousel-control-color:             $white;
$carousel-control-width:             15%;
$carousel-control-opacity:           .5;
$carousel-control-hover-opacity:     .9;
$carousel-control-transition:        opacity .15s ease;

$carousel-indicator-width:           30px;
$carousel-indicator-height:          3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:          3px;
$carousel-indicator-opacity:         .5;
$carousel-indicator-active-bg:       $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:      opacity .6s ease;

$carousel-caption-width:             70%;
$carousel-caption-color:             $white;
$carousel-caption-padding-y:         1.25rem;
$carousel-caption-spacer:            1.25rem;

$carousel-control-icon-width:        2rem;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");

$carousel-transition-duration:       .6s;
$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

Daban-daban ga duhu carousel :

$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

Amfani

Ta hanyar bayanan halayen

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

Ana data-bs-ride="carousel"amfani da sifa don yiwa carousel alama azaman mai rai wanda yake farawa daga nauyin shafi. Idan baku yi amfani data-bs-ride="carousel"da fara fara carousel ɗin ku ba, dole ne ku fara shi da kanku. 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:

const carousel = new bootstrap.Carousel('#myCarousel')

Zabuka

Kamar yadda za a iya wuce zaɓuɓɓuka ta hanyar sifofin bayanai ko JavaScript, zaku iya ƙara sunan zaɓi zuwa data-bs-, kamar a cikin data-bs-animation="{value}". Tabbatar canza nau'in shari'ar sunan zaɓi daga " CamelCase " zuwa " kebab-case " lokacin ƙaddamar da zaɓuɓɓuka ta hanyar halayen bayanai. Misali, amfani data-bs-custom-class="beautifier"maimakon data-bs-customClass="beautifier".

Kamar na Bootstrap 5.2.0, duk abubuwan da aka gyara suna goyan bayan sifa da aka tanada na gwajidata-bs-config wanda zai iya saita tsarin sassauƙan sassa azaman kirtani JSON. Lokacin da kashi yana data-bs-config='{"delay":0, "title":123}'da data-bs-title="456"sifofi, titleƙimar ƙarshe za ta kasance 456kuma keɓantattun halayen bayanan za su soke ƙimar da aka bayar akan data-bs-config. Bugu da ƙari, halayen bayanan da ke akwai suna iya ɗaukar ƙimar JSON kamar data-bs-delay='{"show":0,"hide":150}'.

Suna Nau'in Default Bayani
interval lamba 5000 Adadin lokacin jinkirta tsakanin yin keke ta atomatik abu.
keyboard boolean true Ko carousel ya kamata ya mayar da martani ga abubuwan da suka faru na madannai.
pause kirtani, boolean "hover" Idan an saita zuwa "hover", dakatar da hawan keke na carousel a kunne mouseenterkuma ya ci gaba da hawan 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. Wannan baya ga halayyar linzamin kwamfuta.
ride kirtani, boolean false Idan an saita zuwa true, 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.
touch boolean true Ko carousel ya kamata ya goyi bayan mu'amalar shuɗewar hagu/dama akan na'urorin allo.
wrap boolean true 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 .

Kuna iya ƙirƙirar misalin carousel tare da maginin carousel, misali, don farawa tare da ƙarin zaɓuɓɓuka kuma fara hawan keke ta abubuwa:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
Hanya Bayani
cycle Yana zagayawa cikin abubuwan carousel daga hagu zuwa dama.
dispose Yana lalata carousel na wani abu. (Yana cire bayanan da aka adana akan ɓangaren DOM)
getInstance Hanyar a tsaye wacce ke ba ku damar samun misalin carousel mai alaƙa da nau'in DOM, zaku iya amfani da shi kamar haka: bootstrap.Carousel.getInstance(element).
getOrCreateInstance Hanya madaidaiciya wacce ke dawo da misalin carousel mai alaƙa da abun DOM ko ƙirƙirar sabo idan ba a fara shi ba. Kuna iya amfani da shi kamar haka bootstrap.Carousel.getOrCreateInstance(element):.
next Kewaya zuwa abu na gaba. Komawa ga mai kira kafin a nuna abu na gaba (misali, kafin slid.bs.carouselabin ya faru).
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 abin da ake nufi .
pause Yana dakatar da carousel daga yin keke ta cikin abubuwa.
prev Kewaya zuwa abu na baya. Komawa ga mai kira kafin a nuna abin da ya gabata (misali, kafin slid.bs.carouselabin ya faru).
to Yana zagayawa carousel zuwa wani firam na musamman (0 tushen, kama da tsararru). Komawa ga mai kira kafin a nuna abin da ake nufi (misali, 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
slid.bs.carousel An kori lokacin da carousel ya gama canjin zamewar sa.
slide.bs.carousel Gobara nan da nan lokacin da slideaka kira hanyar misali. 
const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})