Source

I-Carousel

Icandelo lomboniso wesilayidi sokuhamba ngebhayisekile kwizinto-imifanekiso okanye izilayidi zombhalo-njengecarousel.

Ingaba isebenza kanjani

I-carousel ngumboniso wesilayidi sokuhamba ngebhayisikile ngoluhlu lomxholo, owakhiwe nge-CSS 3D ukuguqulwa kunye nentwana yeJavaScript. Isebenza ngothotho lwemifanekiso, isicatshulwa, okanye imarkup yesiko. Ikwabandakanya inkxaso yolawulo lwangaphambili / olulandelayo kunye nezalathi.

Kwiziphequluli apho i- Page Visibility API ixhaswa khona, i-carousel iya kuphepheka i-sliding xa iphepha lewebhu lingabonakali kumsebenzisi (njengaxa ithebhu ye-browser ingasebenzi, iwindow yesiphequluli iyancitshiswa, njl. njl.).

Isiphumo soopopayi seli candelo sixhomekeke prefers-reduced-motionkumbuzo wemidiya. Jonga icandelo leentshukumo ezincitshisiweyo kuxwebhu lwethu lofikelelo .

Nceda uqaphele ukuba iicarousels ezifakwe kwindlwane azixhaswanga, kwaye iicarousels azihambelani nemigangatho yokufikeleleka.

Okokugqibela, ukuba wakha iJavaScript yethu kwimvelaphi, ifunautil.js .

Umzekelo

Iicarousels azizenzeli ngokuzenzekelayo imilinganiselo yesilayidi. Ngaloo ndlela, kunokufuneka usebenzise izixhobo ezongezelelweyo okanye izitayile zesiko ukuze ulinganise ngokufanelekileyo umxholo. Ngelixa ii-carousels zixhasa ulawulo lwangaphambili/olulandelayo kunye nezalathi, azifuneki ngokucacileyo. Yongeza kwaye wenze ngokwezifiso njengoko ubona kufanelekile.

Iklasi .activekufuneka yongezwe kwesinye sezilayidi kungenjalo i-carousel ayiyi kubonakala. Kwakhona qiniseka ukuseta i-id eyodwa kulawulo .carouselolukhethwayo, ngakumbi ukuba usebenzisa iicarousel ezininzi kwiphepha elinye. Ulawulo kunye neempawu zesalathisi kufuneka data-targetzibenophawu (okanye hrefamakhonkco) ahambelana ne-id .carouselyesiqalelo.

Izilayidi kuphela

Nantsi i-carousel enezilayidi kuphela. Qaphela ubukho .d-blockkunye .w-100nemifanekiso ye-carousel ukunqanda ulungelelwaniso lomfanekiso olungagqibekanga lwesikhangeli.

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

Ngolawulo

Ukongeza kulawulo lwangaphambili nolulandelayo:

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

Ngezalathi

Unokongeza izikhombisi kwi-carousel, ecaleni kolawulo, kwakhona.

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

Neentloko-magama

Yongeza ii-captions kwizilayidi zakho ngokulula ngento .carousel-captionengaphakathi kuyo nayiphi na .carousel-item. Zinokufihlwa ngokulula kwizibuko zokujonga ezincinci, njengoko kubonisiwe ngezantsi, ngezixhobo zokubonisa ozikhethelayo . Sizifihla ekuqaleni .d-nonekwaye sizibuyisele kwizixhobo ezinobungakanani obuphakathi kunye .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>

I-Crossfade

Yongeza .carousel-fadekwi-carousel yakho ukuze uphilise izilayidi ngotshintsho olumnyama endaweni yesilayidi.

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

Yongeza data-interval=""kwi- .carousel-itema ukutshintsha ubungakanani bexesha lokulibazisa phakathi kokukhwela ibhayisekile ngokuzenzekelayo ukuya kwinto elandelayo.

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

Ukusetyenziswa

Ngeempawu zedatha

Sebenzisa iimpawu zedatha ukulawula ngokulula indawo ye-carousel. data-slideyamkela amagama angundoqo prevokanye next, eguqula indawo yesilayidi ngokunxulumene nendawo yaso yangoku. Kungenjalo, sebenzisa data-slide-toukudlulisa isalathiso sesilayidi ekrwada kwicarousel data-slide-to="2", etshintsha indawo yesilayidi kwisalathiso esithile esiqala nge 0.

Uphawu data-ride="carousel"loyelelwano lusetyenziselwa ukuphawula i-carousel njengento ephilayo ukuqala kumthwalo wephepha. Ukuba awusebenzisi data-ride="carousel"ukuqalisa i-carousel yakho, kufuneka uyiqalise ngokwakho. Ayinakusetyenziswa ngokudityaniswa ne (ingafunekiyo nengafunekiyo) iJavaScript ecacileyo yokuqaliswa kwecarousel enye.

NgeJavaScript

Fowunela i-carousel ngesandla nge:

$('.carousel').carousel()

Iinketho

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-, njengakwi data-interval="".

Igama Uhlobo Ukuhlala kukho Inkcazo
isithuba inani 5000 Ubungakanani bexesha lokulibaziseka phakathi kokubhayisela ngokuzenzekelayo into. Ukuba ayiyonyani, i-carousel ayiyi kujikeleza ngokuzenzekelayo.
ikhibhodi boolean yinyani Nokuba i-carousel kufuneka isabele kwiziganeko ze-keyboard.
nqumama umtya | boolean "bhabha"

Ukuba imiselwe "hover", misa ukukhwela ibhayisekile kwicarousel mouseenterkwaye iqalise kwakhona ukukhwela ibhayisekile kwicarousel mouseleave. Ukuba imiselwe ku false, ukundanda phezu kwecarousel akusayi kuyimisa.

Kwizixhobo ezisebenza ngokuchukumisa, xa zimiselwe "hover", ukuhamba ngebhayisikile kuya kunqumama touchend(akuba umsebenzisi egqibile ukusebenzisana ne-carousel) ngamaxesha amabini, ngaphambi kokuqalisa kwakhona ngokuzenzekelayo. Qaphela ukuba oku kukongeza kukuziphatha kwe mouse.
khwela umtya bubuxoki Idlala ngokuzenzekelayo i-carousel emva kokuba umsebenzisi ajikelise ngesandla into yokuqala. Ukuba "i-carousel", idlala ngokuzenzekelayo i-carousel kumthwalo.
usonga boolean yinyani Nokuba i-carousel kufuneka iqhubeke ijikeleza okanye ibe neendawo zokumisa nzima.
touch boolean yinyani Nokuba i-carousel kufuneka ixhase ukuswayipha ekhohlo/ekunene kwizixhobo zescreen sokuchukumisa.

Iindlela

Iindlela ze-Asynchronous kunye notshintsho

Zonke iindlela ze-API zi -asynchronous kwaye ziqala utshintsho . Babuyela kumnxeba ngokukhawuleza nje ukuba utshintsho luqalisiwe kodwa ngaphambi kokuba luphele . Ukongeza, ukufowunelwa kwendlela kwicandelo lenguquko kuya kuhoywa .

Jonga uxwebhu lwethu lweJavaScript ngolwazi olungakumbi .

.carousel(options)

Uqalisa i-carousel ngeendlela ozikhethelayo objectkwaye uqalise ukukhwela ibhayisekile kwizinto.

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

.carousel('cycle')

Ujikeleza izinto zecarousel ukusuka ekhohlo ukuya ekunene.

.carousel('pause')

Imisa ikhareshi ekukhweleni ibhayisekile kwizinto.

.carousel(number)

Ukujikelisa i-carousel kwisakhelo esithile (i-0 esekelwe, efana noluhlu). Ubuyela kumnxeba phambi kokuba into ekujoliswe kuyo iboniswe (okt phambi kokuba slid.bs.carouselisiganeko senzeke).

.carousel('prev')

Imijikelo ukuya kwinto yangaphambili. Ubuyela kumnxeba phambi kokuba kuboniswe into yangaphambili (okt phambi kokuba slid.bs.carouselisiganeko senzeke).

.carousel('next')

Biyela ukuya kwinto elandelayo. Ubuyela kumnxeba phambi kokuba kuboniswe into elandelayo (okt phambi kokuba slid.bs.carouselisiganeko senzeke).

.carousel('dispose')

Uyonakalisa i-carousel yento.

Iziganeko

Iklasi ye-carousel ye-Bootstrap iveza iminyhadala emibini yokuhuka ekusebenzeni kwecarousel. Zombini ezi ziganeko zineempawu ezongezelelweyo zilandelayo:

  • direction: Isalathiso apho i-carousel ishelela khona (okanye "left"okanye "right").
  • relatedTarget: Isiqalelo seDOM esityibilikiswa kwindawo njengomba osebenzayo.
  • from: Isalathiso sento yangoku
  • to: Isalathiso senqaku elilandelayo

Zonke iziganeko zecarousel zikhutshwa kwicarousel ngokwayo (okt kwi <div class="carousel">).

Uhlobo loMnyhadala Inkcazo
isilayidi.bs.carousel Esi siganeko sitshatyalaliswa ngoko nangoko xa kusenziwa slideindlela yomzekelo.
slid.bs.carousel Esi siganeko sigxothwa xa i-carousel igqibile inguqu yayo yesilayidi. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

Guqula ubude bexesha lotshintsho

Ubude bexesha benguqu bunokutshintshwa ngokuguquguquka kwe .carousel-item- $carousel-transitionSass phambi kokuhlanganiswa okanye izimbo zesiko ukuba usebenzisa i-CSS ehlanganisiweyo. Ukuba iinguqu ezininzi zisetyenziswa, qiniseka ukuba inguqu yenguqu ichazwa kuqala (umz. transition: transform 2s ease, opacity .5s ease-out).