Carousel

Chigawo cha chiwonetsero chazithunzi poyendetsa zinthu - zithunzi kapena masilayidi amawu - ngati karouse.

Momwe zimagwirira ntchito

Carousel ndi chiwonetsero chazithunzi chakuyenda panjinga zingapo, zomangidwa ndi zosintha za CSS 3D ndi JavaScript pang'ono. Zimagwira ntchito ndi zithunzi zingapo, zolemba, kapena zolembera makonda. Zimaphatikizansopo zothandizira zowongolera zam'mbuyo / zotsatila ndi zizindikiro.

M'masakatuli omwe Tsamba la Kuwoneka kwa API limathandizidwa, carousel imapewa kutsetsereka pomwe tsamba lawebusayiti silikuwoneka kwa wogwiritsa ntchito (monga pomwe tsamba la msakatuli silikugwira ntchito, zenera la osatsegula limachepetsedwa, ndi zina).

Zotsatira zamakanema za gawoli zimatengera prefers-reduced-motionfunso la media. Onani gawo lochepetsedwa la zolemba zathu zofikira .

Chonde dziwani kuti ma carousel okhala ndi zisa sagwiritsidwa ntchito, ndipo ma carousel nthawi zambiri satsatira miyezo yofikira.

Pomaliza, ngati mukupanga JavaScript yathu kuchokera kugwero, pamafunikautil.js .

Chitsanzo

Ma carousel samangosintha kukula kwa slide. Chifukwa chake, mungafunike kugwiritsa ntchito zina zowonjezera kapena masitayilo achikhalidwe kuti mukwaniritse kukula koyenera. Ngakhale ma carousel amathandizira maulamuliro am'mbuyomu/otsatira ndi zizindikiro, sizofunikira. Onjezani ndikusintha momwe mukufunira.

Kalasi .activeiyenera kuwonjezeredwa ku imodzi mwazithunzi apo ayi carousel sidzawoneka. Onetsetsaninso kuti mwakhazikitsa zapadera pazowongolera idzomwe .carouselmwasankha, makamaka ngati mukugwiritsa ntchito ma carousel angapo patsamba limodzi. Zinthu zowongolera ndi zowonetsera ziyenera kukhala ndi mawonekedwe data-target(kapena hrefmaulalo) omwe amafanana idndi .carouselchinthucho.

Masilayidi okha

Nayi kalasi yokhala ndi masiladi okha. Dziwani kupezeka kwa zithunzi .d-blockndi .w-100pa carousel kuti mupewe kusanja kwazithunzi zosasinthika.

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

Ndi zowongolera

Kuwonjezera maulamuliro akale ndi otsatira. Timalimbikitsa kugwiritsa ntchito <button>maelementi, koma mutha kugwiritsanso ntchito <a>maelementi okhala ndi 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>

Ndi zizindikiro

Mukhozanso kuwonjezera zizindikiro ku carousel, pambali pa maulamuliro, nawonso.

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

Ndi mawu ofotokozera

Onjezani mawu omasulira pamasilayidi anu mosavuta ndi .carousel-captionchinthu chomwe chili mkati mwa .carousel-item. Atha kubisika mosavuta pamawonekedwe ang'onoang'ono, monga momwe tawonetsera pansipa, ndi zida zowonetsera . Timawabisa poyamba ndi .d-nonekuwabweretsanso pazida zokhala ndi .d-md-block.

Chizindikiro choyamba cha slide

Zoyimira zina zoyimira pazithunzi zoyambira.

Cholembera chachiwiri

Zoyimira zina zoyimira pazithunzi zachiwiri.

Silayidi yachitatu

Zoyimira zina zoyimira pazithunzi zachitatu.

<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

Onjezani .carousel-fadeku carousel yanu kuti muwongolere ma slide ndi kusintha kozilala m'malo mwa slide. Kutengera zomwe zili mu carousel yanu (mwachitsanzo, ma slide okha), mungafune kuwonjezera .bg-bodykapena CSS yachikhalidwe ku .carousel-items kuti muwoloke bwino.

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

Payekha `.carousel-item`_

Onjezani data-interval=""ku a .carousel-itemkuti musinthe kuchuluka kwa nthawi yochedwetsa pakati pa kupalasa njinga kupita ku chinthu chotsatira.

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

Letsani swiping pakukhudza

Ma Carousel amathandizira kusuntha kumanzere / kumanja pazida zowonekera kuti musunthe pakati pa masilaidi. Izi zitha kuzimitsidwa pogwiritsa ntchito mawonekedwe data-touch. Chitsanzo chomwe chili pansipa sichikuphatikizanso mawonekedwe ake data-ridendipo data-interval="false"sichimangosewera.

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

Kugwiritsa ntchito

Kudzera muzochita za data

Gwiritsani ntchito mawonekedwe a data kuti muwongolere malo a carousel mosavuta. data-slideimavomereza mawu osakira prevkapena next, omwe amasintha malo a slide mogwirizana ndi momwe alili pano. Kapenanso, gwiritsani ntchito data-slide-tokupititsa index ya silayidi ku carousel data-slide-to="2", yomwe imasamutsa malo a slide kupita ku index inayake kuyambira ndi 0.

Makhalidwewa data-ride="carousel"amagwiritsidwa ntchito kuyika carousel ngati yosangalatsa kuyambira pamasamba. Ngati simugwiritsa ntchito data-ride="carousel"kuyambitsa carousel yanu, muyenera kuyiyambitsa nokha. Sichingagwiritsidwe ntchito limodzi ndi (zosafunikira komanso zosafunikira) kutsegulira kwa JavaScript kwa carousel yomweyo.

Kudzera pa JavaScript

Imbani carousel pamanja ndi:

$('.carousel').carousel()

Zosankha

Zosankha zitha kuperekedwa kudzera pa data kapena JavaScript. Pamawonekedwe a data, yonjezerani dzina lachisankho ku data-, monga mu data-interval="".

Dzina	Mtundu	Zosasintha	Kufotokozera
nthawi	nambala	5000	Kuchuluka kwa nthawi yochedwetsa pakati pa kuyendetsa chinthu chokha. Ngati `false`, carousel sidzangozungulira basi.
kiyibodi	boolean	zoona	Kaya carousel ikuyenera kuchitapo kanthu pazochitika za kiyibodi.
kupuma	chingwe \| boolean	'pitani'	Ngati `'hover'`ikonzedwa , imitsani kukwera njinga ya carousel `mouseenter`ndikuyambanso kukwera njinga ya carousel pa `mouseleave`. Ngati `false`itayikidwa , kuyimirira pamwamba pa carousel sikuyimitsa. Pazida zoyatsidwa ndi kukhudza, zikakhazikitsidwa ku `'hover'`, kupalasa njinga kudzayima `touchend`(wogwiritsa ntchito akamaliza kucheza ndi carousel) kwa magawo awiri, asanayambenso. Zindikirani kuti izi ndikuwonjezera pamakhalidwe omwe ali pamwambapa.
kukwera	chingwe	zabodza	Amasewera okha carousel wogwiritsa ntchito atazungulira pamanja chinthu choyamba. Ngati itayikidwa ku `'carousel'`, imasewera okha carousel pa katundu.
kulunga	boolean	zoona	Kaya carousel iyenera kuzungulira mosalekeza kapena kuyima movutikira.
kukhudza	boolean	zoona	Kaya carousel iyenera kuthandizira kusinthana kwa swipe kumanzere/kumanja pazida zapa touchscreen.

Njira

Asynchronous njira ndi kusintha

Njira zonse za API ndizosasinthika ndipo zimayamba kusintha . Amabwerera kwa woyimbayo atangoyamba kusintha koma asanathe . Kuonjezera apo, kuyitana kwa njira pa gawo losintha kudzanyalanyazidwa .

Onani zolemba zathu za JavaScript kuti mudziwe zambiri .

`.carousel(options)`

Imayambitsa carousel ndi zosankha zomwe mungasankhe objectndikuyamba kuyendetsa zinthu.

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

`.carousel('cycle')`

Amazungulira zinthu za carousel kuchokera kumanzere kupita kumanja.

`.carousel('pause')`

Imayimitsa carousel kuti isayendetse zinthu.

`.carousel(number)`

Amayendetsa carousel kupita ku chimango china (0 kutengera, ofanana ndi gulu). Imabwerera kwa woyimbayo chinthu chomwe mukufuna chisanasonyezedwe (ie zisanachitike slid.bs.carousel).

`.carousel('prev')`

Kuzungulira kwa chinthu cham'mbuyo. Imabwereranso kwa woyimbirayo chinthu cham'mbuyo chisanasonyezedwe (ie zisanachitike slid.bs.carousel).

`.carousel('next')`

Kuzungulira ku chinthu chotsatira. Imabwereranso kwa woyimbirayo chinthu china chisanasonyezedwe (mwachitsanzo, slid.bs.carouselchochitikacho chisanachitike).

`.carousel('dispose')`

Kuwononga carousel ya element.

`.carousel('nextWhenVisible')`

Osayendetsa carousel kupita kwina pomwe tsamba silikuwoneka kapena carousel kapena kholo lake silikuwoneka. Imabwereranso kwa woyimbirayo chinthu china chisanasonyezedwe (mwachitsanzo, slid.bs.carouselchochitikacho chisanachitike).

`.carousel('to')`

Amayendetsa carousel kupita ku chimango china (0 kutengera, ofanana ndi gulu). Imabwereranso kwa woyimbirayo chinthu china chisanasonyezedwe (mwachitsanzo, slid.bs.carouselchochitikacho chisanachitike).

Zochitika

Kalasi ya carousel ya Bootstrap imawulula zochitika ziwiri zolumikizana ndi machitidwe a carousel. Zochitika zonsezi zili ndi zotsatirazi zowonjezera:

direction: Njira yomwe carousel ikutsetserekera (kaya "left"kapena "right").
relatedTarget: Chigawo cha DOM chomwe chikusunthidwa kuti chikhale chogwira ntchito.
from: Mndandanda wazinthu zamakono
to: Mlozera wa chinthu chotsatira

Zochitika zonse za carousel zimathamangitsidwa pa carousel yomwe (ie pa <div class="carousel">).

Mtundu wa Chochitika	Kufotokozera
slide.bs.carousel	Chochitika ichi chimayaka nthawi yomweyo `slide`njira yachitsanzo ikugwiritsidwa ntchito.
slid.bs.carousel	Chochitikachi chimachotsedwa pamene carousel yamaliza kusintha kwake.

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

Sinthani nthawi yosinthira

Nthawi yosinthira .carousel-itemimatha kusinthidwa ndikusintha kwa $carousel-transitionSass musanapange kapena masitayilo achikhalidwe ngati mukugwiritsa ntchito CSS yophatikizidwa. Ngati masinthidwe angapo agwiritsidwa ntchito, onetsetsani kuti masinthidwewo afotokozedwa poyamba (mwachitsanzo. transition: transform 2s ease, opacity .5s ease-out).