Carousel

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

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.

Ubwanyuma, niba wubaka JavaScript yacu kuva isoko, birasabautil.js .

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 id idasanzwe kuri .carouselkugenzura kubushake, cyane cyane niba ukoresha karuseli nyinshi kurupapuro rumwe. Kugenzura no kwerekana ibipimo bigomba kugira data-targetikiranga (cyangwa hrefkubihuza) bihuye na id .carouselyibintu.

Igice gusa

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

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

Nubugenzuzi

Ongeraho mubigenzurwa byabanjirije nibikurikira:

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

Hamwe n'ibipimo

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

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

Hamwe n'amagambo yanditseho

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 .d-md-block.

Ikimenyetso cya mbere

Nulla vitae elit libero, pharetra augue mollis interdum.

Ikimenyetso cya kabiri

Lorem ipsum dolor icara amet, consectetur adipiscing elit.

Ikimenyetso cya gatatu

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

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

Kwambukiranya

Ongera .carousel-fadekuri karuseli yawe kugirango ushushanye amashusho hamwe ninzibacyuho yazimye aho kuba slide.

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

`.carousel-item`Intera ya buri muntu

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

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

Ikoreshwa

Binyuze mu biranga amakuru

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

Ikiranga data-ride="carousel"gikoreshwa mukuranga karuseli nka animasiyo itangirira kurupapuro. Niba udakoresha data-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:

$('.carousel').carousel()

Amahitamo

Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-, Nka Muri data-interval="".

Izina	Andika	Mburabuzi	Ibisobanuro
intera	umubare	5000	Ingano yigihe cyo gutinda hagati yizunguruka yikintu. Niba ari ibinyoma, karuseli ntabwo izahita izunguruka.
Mwandikisho	boolean	ni ukuri	Niba karuseli igomba kwitwara kubyabaye kuri clavier.
hagarara	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. Menya ko ibi byiyongera kumyitwarire yimbeba yavuzwe haruguru.
kugendera	umugozi	ibinyoma	Autoplays karuseli nyuma yumukoresha intoki azunguruka ikintu cya mbere. Niba "karuseli", autoplays karuseli kumuzigo.
gupfunyika	boolean	ni ukuri	Niba karuseli igomba kuzunguruka ubudasiba cyangwa ifite guhagarara gukomeye.
gukoraho	boolean	ni ukuri	Niba karuseli igomba gushyigikira ibumoso / iburyo bwo guhanagura ibikoresho bya ecran ya ecran.

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 .

`.carousel(options)`

Itangiza karuseli hamwe nuburyo bwo guhitamo objecthanyuma igatangira gusiganwa ku magare binyuze mubintu.

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

`.carousel('cycle')`

Amagare anyuze muri karuseli kuva ibumoso ugana iburyo.

`.carousel('pause')`

Hagarika karuseli gusiganwa ku magare binyuze mu bintu.

`.carousel(number)`

Kuzenguruka karuseli kumurongo runaka (0 ishingiye, isa na array). Garuka kumuhamagara mbere yuko intego yerekanwe (ni ukuvuga mbere yuko slid.bs.carouselibyabaye biba).

`.carousel('prev')`

Amagare ku kintu kibanziriza iki. Garuka kumuhamagara mbere yikintu cyabanjirije cyerekanwe (ni ukuvuga mbere yuko slid.bs.carouselibyabaye biba).

`.carousel('next')`

Amagare ku kintu gikurikira. Garuka kumuhamagara mbere yikintu gikurikira cyerekanwe (ni ukuvuga mbere yuko slid.bs.carouselibyabaye biba).

`.carousel('dispose')`

Gusenya ikintu cya karuseli.

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 nkibintu bikora.
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
slide.bs.carousel	Ibirori birasa ako kanya mugihe `slide`urugero rwakoreshejwe.
slide.bs.carousel	Ibirori birukanwa mugihe karuseli yarangije kunyerera.

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

Hindura igihe cyinzibacyuho

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