Carousel

Igice cya sisitemu yo gusiganwa ku magare binyuze mu bintu - amashusho cyangwa amashusho yinyandiko - nka karuseli.

Kuriyi page

Uburyo ikora

Carousel ni slide yo gusiganwa ku magare binyuze mu ruhererekane rw'ibirimo, yubatswe na CSS 3D ihindura hamwe na JavaScript. Ikorana nuruhererekane rwamashusho, inyandiko, cyangwa ikimenyetso cyihariye. Harimo kandi inkunga kubanza / ubutaha kugenzura n'ibipimo.

Mucukumbuzi aho Page Visibility API ishyigikiwe, karuseli izirinda kunyerera mugihe urubuga rutagaragara kubakoresha (nkigihe iyo tab ya mushakisha idakora, idirishya rya mushakisha ryaragabanutse, nibindi).

Ingaruka ya animasiyo yibi bice biterwa prefers-reduced-motionnibibazo byitangazamakuru. Reba igice cyagabanijwe cyicyiciro cyibisobanuro byacu .

Nyamuneka umenye ko karuseli yatewe idashyigikiwe, kandi karuseli muri rusange ntabwo yujuje ubuziranenge bwo kugerwaho.

Urugero

Carousels ntabwo ihita isanzwe ibipimo bya slide. Nkibyo, urashobora gukenera gukoresha ibikorwa byingirakamaro cyangwa uburyo bwihariye kugirango ubone ubunini bukwiye. Mugihe karuseli ishyigikira ibyabanje / ubutaha kugenzura n'ibipimo, ntabwo bisabwa neza. Ongeraho kandi uhindure uko ubishaka.

Icyiciro .activegikeneye kongerwaho kamwe mumashusho ubundi karuseli ntizagaragara. Wemeze kandi gushiraho umwihariko idkuri .carouselkugenzura kubushake, cyane cyane niba ukoresha karuseli nyinshi kurupapuro rumwe. Kugenzura no kwerekana ibipimo bigomba kugira data-bs-targetikiranga (cyangwa hrefkubihuza) bihuye idnibintu .carousel.

Igice gusa

Hano karuseli ifite amashusho gusa. Reba ahari ibishusho bya .d-blockkaruseli .w-100kugirango wirinde gushakisha amashusho adasanzwe.

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>

Nubugenzuzi

Ongeraho mubibanziriza nubutaha. Turasaba gukoresha <button>ibintu, ariko urashobora kandi gukoresha <a>ibintu hamwe 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>

Hamwe n'ibipimo

Urashobora kandi kongeramo ibipimo kuri karuseli, hamwe nubugenzuzi, nabwo.

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>

Hamwe n'ibisobanuro

Ongeraho ibisobanuro kuri slide yawe byoroshye hamwe .carousel-captionnibintu muri byose .carousel-item. Birashobora guhishwa byoroshye kubireba bito, nkuko bigaragara hano hepfo, hamwe nibikorwa byingirakamaro . Turabahisha ubanza hamwe .d-noneno kubagarura kubikoresho biciriritse hamwe na .d-md-block.

Ikimenyetso cya mbere

Bamwe bahagarariye ibibanza byerekanwa kumurongo wambere.

Ikimenyetso cya kabiri

Bamwe bahagarariye ibibanza kumwanya wa kabiri.

Ikimenyetso cya gatatu

Bamwe bahagarariye ibibanza kumwanya wa gatatu.

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>

Kwambukiranya

Ongera .carousel-fadekuri karuseli yawe kugirango ushushanye amashusho hamwe ninzibacyuho yazimye aho kuba slide. Ukurikije ibikubiyemo bya karuseli (urugero, inyandiko yerekana gusa), urashobora kongeramo .bg-bodycyangwa CSS yihariye kuri .carousel-items kugirango ube wambukiranya.

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>

`.carousel-item`Intera y'umuntu ku giti cye

Ongeraho data-bs-interval=""a .carousel-itemkugirango uhindure igihe cyo gutinda hagati yamagare ahita yikurikiranya.

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>

Hagarika gukorakora

Carousels ishyigikira guhanagura ibumoso / iburyo kubikoresho bya touchscreen kugirango yimuke hagati ya slide. Ibi birashobora guhagarikwa ukoresheje data-bs-touchikiranga. Urugero rukurikira narwo ntirurimo data-bs-rideikiranga kugirango idakora autoplay.

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>

Impinduka zijimye

Ongeraho kumwijima .carousel-darkkugenzura .carousel, ibipimo, hamwe nibisobanuro. Igenzura ryahinduwe uhereye kubisanzwe byera byuzuza filterumutungo wa CSS. Ibisobanuro hamwe nubugenzuzi bifite Sass yinyongera ihindura i colorna background-color.

Ikimenyetso cya mbere

Bamwe bahagarariye ibibanza byerekanwa kumurongo wambere.

Ikimenyetso cya kabiri

Bamwe bahagarariye ibibanza kumwanya wa kabiri.

Ikimenyetso cya gatatu

Bamwe bahagarariye ibibanza kumwanya wa gatatu.

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>

Inzibacyuho

Igihe cyinzibacyuho .carousel-itemgishobora guhinduka hamwe na $carousel-transition-durationSass ihinduka mbere yo gukusanya cyangwa uburyo bwihariye niba ukoresha CSS yakozwe. Niba inzibacyuho nyinshi zashyizwe mu bikorwa, menya neza ko impinduka zasobanuwe mbere (eg transition: transform 2s ease, opacity .5s ease-out).

Sass

Ibihinduka

Ibihinduka kuri karuseli zose:

$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`)

Ibihinduka kuri karuseli yijimye :

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

Ikoreshwa

Binyuze mu biranga amakuru

Koresha ibiranga amakuru kugirango ugenzure byoroshye umwanya wa karuseli. data-bs-slideyemera ijambo ryibanze prevcyangwa next, rihindura umwanya uhagaze ugereranije nubu. Ubundi, koresha data-bs-slide-tokugirango unyuze kumurongo wibanze kuri karuseli data-bs-slide-to="2", ihinduranya umwanya kumwanya runaka utangirana na 0.

Ikiranga data-bs-ride="carousel"gikoreshwa mukuranga karuseli nka animasiyo itangirira kurupapuro. Niba udakoresha data-bs-ride="carousel"gutangiza karuseli yawe, ugomba kuyitangiza wenyine. Ntishobora gukoreshwa ifatanije na (kurenza kandi bitari ngombwa) JavaScript itangizwa ya karuseli imwe.

Binyuze kuri JavaScript

Hamagara karuseli intoki hamwe na:

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

Amahitamo

Nkuko amahitamo ashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript, urashobora kongeramo izina ryamahitamo data-bs-, nkuko biri data-bs-animation="{value}". Witondere guhindura ubwoko bwurubanza rwamahitamo kuva " ingamiya " kuri " kebab-urubanza " mugihe utambutsa amahitamo ukoresheje ibiranga amakuru. Kurugero, koresha data-bs-custom-class="beautifier"aho data-bs-customClass="beautifier".

Nko muri Bootstrap 5.2.0, ibice byose bishyigikira igeragezwa ryibitse ryamakuru data-bs-configrishobora kubamo ibice byoroshye nkibikoresho bya JSON. Mugihe ikintu gifite data-bs-config='{"delay":0, "title":123}'nibiranga data-bs-title="456", agaciro kanyuma titlekazaba 456kandi amakuru yihariye aranga agaciro katanzwe kuri data-bs-config. Mubyongeyeho, amakuru ariho aranga arashobora kubika JSON indangagaciro nka data-bs-delay='{"show":0,"hide":150}'.

Izina	Andika	Mburabuzi	Ibisobanuro
`interval`	umubare	`5000`	Ingano yigihe cyo gutinda hagati yizunguruka yikintu.
`keyboard`	boolean	`true`	Niba karuseli igomba kwitwara kubyabaye kuri clavier.
`pause`	umugozi, boolean	`"hover"`	Niba byashyizweho `"hover"`, ihagarika amagare ya karuseli `mouseenter`hanyuma ikomeza gusiganwa ku magare ya karuseli kuri `mouseleave`. Niba byashyizweho `false`, kugendagenda hejuru ya karuseli ntibizahagarara. Ku bikoresho bifasha gukoraho, mugihe byashizweho `"hover"`, gusiganwa ku magare bizahagarara `touchend`(igihe umukoresha arangije gukorana na karuseli) intera ebyiri, mbere yo guhita ikomeza. Ibi byiyongera kumyitwarire yimbeba.
`ride`	umugozi, boolean	`false`	Niba byashyizweho `true`, autoplays karuseli nyuma yukoresha intoki zizunguruka ikintu cya mbere. Niba byashyizweho `"carousel"`, autoplays karuseli kumuzigo.
`touch`	boolean	`true`	Niba karuseli igomba gushyigikira ibumoso / iburyo bwo guhanagura ibikoresho bya ecran ya ecran.
`wrap`	boolean	`true`	Niba karuseli igomba kuzunguruka ubudahwema cyangwa kugira guhagarara gukomeye.

Uburyo

Uburyo butajegajega ninzibacyuho

Inzira zose za API ntizihuza kandi zitangira inzibacyuho . Basubira kumuhamagara mugihe inzibacyuho itangiye ariko itararangira . Mubyongeyeho, uburyo bwo guhamagarira ibice byinzibacyuho bizirengagizwa .

Reba inyandiko zacu za JavaScript kubindi bisobanuro .

Urashobora gukora karuseli urugero hamwe na karuseli yubaka, kurugero, kugirango utangire amahitamo yinyongera hanyuma utangire gusiganwa ku magare ukoresheje ibintu:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})

Uburyo	Ibisobanuro
`cycle`	Amagare anyuze muri karuseli kuva ibumoso ugana iburyo.
`dispose`	Gusenya ikintu cya karuseli. (Kuraho amakuru yabitswe kubintu bya DOM)
`getInstance`	Uburyo buhamye butuma ubona urugero rwa karuseli ijyanye na DOM element, urashobora kuyikoresha gutya : `bootstrap.Carousel.getInstance(element)`.
`getOrCreateInstance`	Uburyo buhagaze busubiza karuseli urugero rujyanye nibintu bya DOM cyangwa gukora bundi bushya mugihe bitatangijwe. Urashobora kuyikoresha gutya : `bootstrap.Carousel.getOrCreateInstance(element)`.
`next`	Amagare ku kintu gikurikira. Garuka kumuhamagara mbere yikintu gikurikira cyerekanwe (urugero, mbere yuko `slid.bs.carousel`ibyabaye biba).
`nextWhenVisible`	Ntukazenguruke karuseli kurikurikira mugihe page itagaragara cyangwa karuseli cyangwa umubyeyi wacyo ntabwo igaragara. Garuka kumuhamagara mbere yuko intego yerekanwe .
`pause`	Hagarika karuseli gusiganwa ku magare binyuze mu bintu.
`prev`	Amagare ku kintu kibanziriza iki. Garuka kumuhamagara mbere yikintu cyabanjirije cyerekanwe (urugero, mbere yuko `slid.bs.carousel`ibyabaye biba).
`to`	Kuzenguruka karuseli kumurongo runaka (0 ishingiye, isa na array). Garuka kumuhamagara mbere yikintu cyerekanwe (urugero, mbere yuko `slid.bs.carousel`ibyabaye biba).

Ibyabaye

Bootstrap ya karuseli yerekana ibintu bibiri byo guhuza imikorere ya karuseli. Ibyabaye byombi bifite imitungo yinyongera ikurikira:

direction: Icyerekezo karuseli iranyerera (haba "left"cyangwa "right").
relatedTarget: Ikintu cya DOM kirimo kunyerera ahantu nkikintu gikora.
from: Ironderero ryikintu kiriho
to: Ironderero ryikintu gikurikira

Ibintu byose bya karuseli birasa kuri karuseli ubwayo (ni ukuvuga kuri <div class="carousel">).

Ubwoko bwibyabaye	Ibisobanuro
`slid.bs.carousel`	Umuriro iyo karuseli yarangije kunyerera.
`slide.bs.carousel`	Umuriro uhita iyo uburyo `slide`bwurugero bwasabwe.

const myCarousel = document.getElementById('myCarousel')

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

Carousel

Uburyo ikora

Urugero

Igice gusa

Nubugenzuzi

Hamwe n'ibipimo

Hamwe n'ibisobanuro

Ikimenyetso cya mbere

Ikimenyetso cya kabiri

Ikimenyetso cya gatatu

Kwambukiranya

.carousel-itemIntera y'umuntu ku giti cye

Hagarika gukorakora

Impinduka zijimye

Ikimenyetso cya mbere

Ikimenyetso cya kabiri

Ikimenyetso cya gatatu

Inzibacyuho

Sass

Ibihinduka

Ikoreshwa

Binyuze mu biranga amakuru

Binyuze kuri JavaScript

Amahitamo

Uburyo

Uburyo butajegajega ninzibacyuho

Ibyabaye

`.carousel-item`Intera y'umuntu ku giti cye