Source

Carousel

Ohun elo agbelera fun gigun kẹkẹ nipasẹ awọn eroja — awọn aworan tabi awọn ifaworanhan ti ọrọ — bii carousel kan.

Bawo ni o ṣe n ṣiṣẹ

Carousel jẹ agbelera fun gigun kẹkẹ nipasẹ onka akoonu, ti a ṣe pẹlu awọn iyipada CSS 3D ati diẹ ninu JavaScript. O ṣiṣẹ pẹlu lẹsẹsẹ awọn aworan, ọrọ, tabi isamisi aṣa. O tun pẹlu atilẹyin fun iṣaaju / atẹle awọn idari ati awọn itọkasi.

Ninu awọn aṣawakiri nibiti API Hihan Oju -iwe ti ni atilẹyin, carousel yoo yago fun sisun nigbati oju opo wẹẹbu ko ba han si olumulo (bii nigbati taabu ẹrọ aṣawakiri ko ṣiṣẹ, window aṣawakiri ti dinku, ati bẹbẹ lọ).

Ipa iwara ti paati yii dale lori prefers-reduced-motionibeere media. Wo apakan išipopada ti o dinku ti iwe iraye si wa .

Jọwọ ṣe akiyesi pe awọn carousels oni ite ko ni atilẹyin, ati pe awọn carousels ni gbogbogbo ko ni ibamu pẹlu awọn iṣedede iraye si.

Nikẹhin, ti o ba n kọ JavaScript wa lati orisun, o niloutil.js .

Apeere

Carousels ko ṣe deede awọn iwọn ifaworanhan laifọwọyi. Bi iru bẹẹ, o le nilo lati lo awọn ohun elo afikun tabi awọn aṣa aṣa lati ṣe iwọn akoonu ti o yẹ. Lakoko ti awọn carousels ṣe atilẹyin awọn idari iṣaaju / atẹle ati awọn itọkasi, wọn ko nilo ni gbangba. Ṣafikun ati ṣe akanṣe bi o ṣe rii pe o yẹ.

Kilasi .activenilo lati fi kun si ọkan ninu awọn kikọja bibẹẹkọ carousel kii yoo han. Paapaa rii daju lati ṣeto id alailẹgbẹ lori .carouselfun awọn idari iyan, paapaa ti o ba nlo awọn carousels pupọ lori oju-iwe kan. Iṣakoso ati awọn eroja atọka gbọdọ ni abuda kan data-target(tabi hreffun awọn ọna asopọ) ti o baamu id ti .carouseleroja naa.

Awọn ifaworanhan nikan

Eyi ni carousel kan pẹlu awọn kikọja nikan. Ṣe akiyesi wiwa ti .d-blockati .w-100lori awọn aworan carousel lati ṣe idiwọ titete aworan aiyipada aṣawakiri.

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

Pẹlu awọn iṣakoso

Ṣafikun ni iṣaaju ati awọn iṣakoso atẹle:

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

Pẹlu awọn itọkasi

O tun le ṣafikun awọn olufihan si carousel, lẹgbẹẹ awọn idari, paapaa.

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

Pẹlu awọn akọle

Ṣafikun awọn akọle si awọn ifaworanhan rẹ ni irọrun pẹlu .carousel-captioneroja laarin eyikeyi .carousel-item. Wọn le farapamọ ni irọrun lori awọn ibudo wiwo kekere, bi a ṣe han ni isalẹ, pẹlu awọn ohun elo ifihan aṣayan . A tọju wọn lakoko pẹlu .d-noneati mu wọn pada lori awọn ẹrọ alabọde pẹlu .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>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>

Crossfade

Ṣafikun .carousel-fadesi carousel rẹ si awọn ifaworanhan ere idaraya pẹlu iyipada ipare dipo ifaworanhan kan.

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

Ṣafikun data-interval=""-un lati .carousel-itemyi iye akoko pada lati ṣe idaduro laarin gigun kẹkẹ laifọwọyi si ohun kan ti o tẹle.

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

Lilo

Nipasẹ awọn abuda data

Lo awọn abuda data lati ṣakoso ni irọrun ipo ti carousel. data-slidegba awọn koko-ọrọ prevtabi next, eyiti o paarọ ipo ifaworanhan ni ibatan si ipo lọwọlọwọ rẹ. Ni omiiran, lo data-slide-tolati kọja atọka ifaworanhan aise si carousel data-slide-to="2", eyiti o yi ipo ifaworanhan si atọka kan pato ti o bẹrẹ pẹlu 0.

Ẹya data-ride="carousel"naa ni a lo lati samisi carousel kan bi ere idaraya ti o bẹrẹ ni fifuye oju-iwe. Ti o ko ba lo data-ride="carousel"lati pilẹṣẹ carousel rẹ, o ni lati pilẹṣẹ rẹ funrararẹ. Ko le ṣee lo ni apapo pẹlu (laiṣe ati kobojumu) ipilẹṣẹ JavaScript ti o fojuhan ti carousel kanna.

Nipasẹ JavaScript

Pe carousel pẹlu ọwọ pẹlu:

$('.carousel').carousel()

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-interval="".

Oruko Iru Aiyipada Apejuwe
aarin nọmba 5000 Iye akoko lati ṣe idaduro laarin gigun kẹkẹ ohun kan laifọwọyi. Ti o ba jẹ eke, carousel kii yoo yipo laifọwọyi.
keyboard boolian ooto Boya carousel yẹ ki o fesi si awọn iṣẹlẹ keyboard.
da duro okun | boolian "rababa"

Ti o ba ṣeto si "hover", da duro gigun kẹkẹ ti carousel lori mouseenterati tun bẹrẹ gigun kẹkẹ ti carousel lori mouseleave. Ti a ba ṣeto si false, gbigbe lori carousel kii yoo da duro.

Lori awọn ẹrọ ti o ni ifọwọkan, nigbati o ba ṣeto si "hover", gigun kẹkẹ yoo da duro lori touchend(ni kete ti olumulo ba ti pari ibaraenisepo pẹlu carousel) fun awọn aaye arin meji, ṣaaju ki o to bẹrẹ laifọwọyi. Ṣe akiyesi pe eyi jẹ afikun si ihuwasi asin ti o wa loke.
gigun okun eke Ṣe adaṣe carousel ni adaṣe lẹhin ti olumulo fi ọwọ yi nkan akọkọ. Ti "carousel", ṣe adaṣe carousel lori fifuye.
murasilẹ boolian ooto Boya carousel yẹ ki o yipo nigbagbogbo tabi ni awọn iduro lile.
fi ọwọ kan boolian ooto Boya carousel yẹ ki o ṣe atilẹyin awọn ibaraẹnisọrọ ra osi / ọtun lori awọn ẹrọ iboju ifọwọkan.

Awọn ọna

Awọn ọna Asynchronous ati awọn iyipada

Gbogbo awọn ọna API jẹ asynchronous ati bẹrẹ iyipada kan . Wọn pada si ọdọ olupe ni kete ti iyipada ti bẹrẹ ṣugbọn ṣaaju ki o to pari . Ni afikun, ipe ọna kan lori paati iyipada yoo jẹ kọbikita .

Wo iwe JavaScript wa fun alaye diẹ sii .

.carousel(options)

Ti bẹrẹ carousel pẹlu awọn aṣayan iyan objectati bẹrẹ gigun kẹkẹ nipasẹ awọn ohun kan.

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

.carousel('cycle')

Yiyipo nipasẹ awọn ohun carousel lati osi si otun.

.carousel('pause')

Da carousel duro lati gigun kẹkẹ nipasẹ awọn ohun kan.

.carousel(number)

Yi kẹkẹ carousel lọ si fireemu kan pato (orisun 0, iru si orun). Pada si olupe ṣaaju ki o to han ohun ibi-afẹde (ie ṣaaju ki slid.bs.carouseliṣẹlẹ naa to waye).

.carousel('prev')

Awọn iyipo si nkan ti tẹlẹ. Pada si olupe ṣaaju ki ohun ti tẹlẹ ti han (ie ṣaaju ki slid.bs.carouseliṣẹlẹ to waye).

.carousel('next')

Awọn iyipo si nkan atẹle. Pada si olupe ṣaaju ki ohun ti o tẹle ti han (ie ṣaaju ki slid.bs.carouseliṣẹlẹ to waye).

.carousel('dispose')

Pa carousel eroja run.

Awọn iṣẹlẹ

Kilasi carousel Bootstrap ṣafihan awọn iṣẹlẹ meji fun sisọ sinu iṣẹ ṣiṣe carousel. Awọn iṣẹlẹ mejeeji ni awọn ohun-ini afikun wọnyi:

  • direction: Awọn itọsọna ninu eyi ti awọn carousel ti wa ni sisun (boya "left"tabi "right").
  • relatedTarget: Eroja DOM ti o wa ni slid sinu aaye bi ohun ti nṣiṣe lọwọ.
  • from: Atọka ti nkan lọwọlọwọ
  • to: Atọka ti nkan atẹle

Gbogbo awọn iṣẹlẹ carousel jẹ ina si carousel funrararẹ (ie ni <div class="carousel">).

Iṣẹlẹ Iru Apejuwe
slide.bs.carousel Iṣẹlẹ yii ina lẹsẹkẹsẹ nigbati ọna slideapẹẹrẹ ba pe.
slid.bs.carousel Iṣẹlẹ yii jẹ ina nigbati carousel ti pari iyipada ifaworanhan rẹ. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

Yi iye akoko iyipada pada

Iye akoko iyipada ti .carousel-itemle yipada pẹlu $carousel-transitiononiyipada Sass ṣaaju kikojọ tabi awọn aṣa aṣa ti o ba nlo CSS ti o ṣajọ. Ti a ba lo awọn iyipada pupọ, rii daju pe iyipada iyipada jẹ asọye ni akọkọ (fun apẹẹrẹ transition: transform 2s ease, opacity .5s ease-out).