Carousel

Chigawo cha chiwonetsero chazithunzi poyendetsa zinthu - zithunzi kapena masilaidi a mawu - ngati carousel.

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 Lowonekera 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).

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.

Onetsetsani kuti mwayika id yapadera paziwongolero zomwe .carouselmwasankha, makamaka ngati mukugwiritsa ntchito ma carousel angapo patsamba limodzi.

Masilayidi okha

Nayi kalasi yokhala ndi masiladi okha. Dziwani kupezeka kwa zithunzi .d-blockndi .img-fluidpa 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 class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

Ndi zowongolera

Kuwonjezera maulamuliro akale ndi otsatirawa:

Zam'mbuyo Ena

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </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>

Ndi zizindikiro

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

Zam'mbuyo Ena

<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 class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </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>

Ndi mawu ofotokozera

Onjezani mawu omasulira pamasiladi 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

Nulla vitae elit libero, pharetra augue mollis interdum.

Cholembera chachiwiri

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Silayidi yachitatu

Kukongola commodo cursus magna, vel scelerisque nisl consectetur.

Zam'mbuyo Ena

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</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. 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="".

Njira

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

Azunguliza carousel ku chimango china (0 kutengera, ofanana ndi gulu). Amabwereranso kwa woyimbirayo chinthu chomwe mukufuna chisanasonyezedwe (ie zisanachitike slid.bs.carousel).

.carousel('prev')

Kuzungulira kwa chinthu cham'mbuyo. Imabwereranso kwa woyimbirayo chinthu cham'mbuyo chisanasonyezedwe (mwachitsanzo, slid.bs.carouselchochitikacho chisanachitike).

.carousel('next')

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

.carousel('dispose')

Kuwononga carousel ya element.

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">).

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