Tsibela kumxholo ophambili Tsiba uye kukhangelo lwamaxwebhu
in English

I-Carousel

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

Kweli phepha

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.

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 ukuba useta eyodwa idkulawulo .carouselolukhethwayo, ngakumbi ukuba usebenzisa iicarousel ezininzi kwiphepha elinye. Ulawulo kunye neempawu zesalathisi kufuneka data-bs-targetzibenophawu (okanye hrefamakhonkco) ahambelana idnesici .carousel.

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-bs-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. Sincoma ukusebenzisa <button>izinto, kodwa ungasebenzisa kwakhona <a>izinto ezine role="button".

<div id="carouselExampleControls" class="carousel slide" data-bs-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-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Ngezalathi

Unokongeza izikhombisi kwi-carousel, ecaleni kolawulo, kwakhona.

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</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-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

I-Crossfade

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

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-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-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

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

<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-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-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Khubaza ukuswayipha kokuchukumisa

Iicarousels zixhasa ukuswayipha ngasekhohlo/ekunene kwizixhobo zescreen sokuchukumisa ukuhamba phakathi kwezilayidi. Oku kunokucinywa kusetyenziswa data-bs-touchuphawu loyelelwano. Lo mzekelo ungezantsi nawo awubandakanyi data-bs-rideuphawu kwaye unayo data-bs-interval="false"ngoko ayidlali ngokuzenzekelayo.

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-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-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Umahluko omnyama

Yongeza .carousel-darkkulawulo .carouselolumnyama, izibonisi, kunye nezihloko. Izilawuli zijikisiwe ukusuka ekuzaliseni kwazo okumhlophe okungagqibekanga filterngepropathi yeCSS. Iintloko-magama kunye nolawulo zineenguqu ezongezelelweyo zeSass ezenza ngokwezifiso colorkunye ne background-color.

<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <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" data-bs-interval="2000">
      <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-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Inguqu yesiko

Ubude bexesha benguqu bunokutshintshwa ngokuguquguquka kwe .carousel-item- $carousel-transition-durationSass 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).

Sass

Izinto eziguquguqukayo

$carousel-control-color:             $white;
$carousel-control-width:             15%;
$carousel-control-opacity:           .5;
$carousel-control-hover-opacity:     .9;
$carousel-control-transition:        opacity .15s ease;

$carousel-indicator-width:           30px;
$carousel-indicator-height:          3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:          3px;
$carousel-indicator-opacity:         .5;
$carousel-indicator-active-bg:       $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:      opacity .6s ease;

$carousel-caption-width:             70%;
$carousel-caption-color:             $white;
$carousel-caption-padding-y:         1.25rem;
$carousel-caption-spacer:            1.25rem;

$carousel-control-icon-width:        2rem;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");

$carousel-transition-duration:       .6s;
$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

Ukusetyenziswa

Ngeempawu zedatha

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

Uphawu data-bs-ride="carousel"loyelelwano lusetyenziselwa ukuphawula i-carousel njengento ephilayo ukuqala kumthwalo wephepha. Ukuba awusebenzisi data-bs-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:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)

Iinketho

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

Igama Uhlobo Ukuhlala kukho Inkcazo
interval inani 5000 Ubungakanani bexesha lokulibaziseka phakathi kokubhayisela ngokuzenzekelayo into. Ukuba false, i-carousel ayiyi kujikeleza ngokuzenzekelayo.
keyboard boolean true Nokuba i-carousel kufuneka isabele kwiziganeko ze-keyboard.
pause umtya | boolean 'hover'

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.
ride umtya | boolean false Idlala ngokuzenzekelayo i-carousel emva kokuba umsebenzisi ajikelise ngesandla into yokuqala. Ukuba imiselwe ku- 'carousel', idlala ngokuzenzekelayo ikharouse elayishiweyo.
wrap boolean true Nokuba i-carousel kufuneka iqhubeke ijikeleza okanye ibe neendawo zokumisa nzima.
touch boolean true 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 .

Unokwenza umzekelo wecarousel kunye nomakhi wecarousel, umzekelo, ukuqalisa ngeenketho ezongezelelweyo kwaye uqalise ukukhwela ibhayisekile kwizinto:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
  interval: 2000,
  wrap: false
})
Indlela Inkcazo
cycle Ujikeleza izinto zecarousel ukusuka ekhohlo ukuya ekunene.
pause Imisa ikhareshi ekukhweleni ibhayisekile kwizinto.
prev Imijikelo ukuya kwinto yangaphambili. Ubuyela kumnxeba phambi kokuba kuboniswe into yangaphambili (umzekelo, phambi kokuba slid.bs.carouselisiganeko senzeke).
next Biyela ukuya kwinto elandelayo. Ubuyela kumnxeba phambi kokuba kuboniswe into elandelayo (umzekelo, phambi kokuba slid.bs.carouselisiganeko senzeke).
nextWhenVisible Sukujikeleza icarousel ukuya kwelinye xa iphepha lingabonakali okanye i-carousel okanye umzali wayo engabonakali. Ubuyela kumnxeba phambi kokuba kuboniswe into ekujoliswe kuyo
to Ukujikelisa i-carousel kwisakhelo esithile (i-0 esekelwe, efana noluhlu). Ubuyela kumnxeba phambi kokuba into ekujoliswe kuyo iboniswe (umzekelo, phambi kokuba slid.bs.carouselisiganeko senzeke).
dispose Uyonakalisa i-carousel yento. (Isusa idatha egciniweyo kwisiqalelo seDOM)
getInstance Indlela engatshintshiyo ekuvumela ukuba ufumane umzekelo wecarousel onxulunyaniswa nento yeDOM, ungayisebenzisa ngolu hlobo:bootstrap.Carousel.getInstance(element)
getOrCreateInstance Indlela engatshintshiyo ebuyisela umzekelo we-carousel ehambelana ne-DOM element okanye ukuyila entsha ukuba ayikhange iqalwe. Ungayisebenzisa ngolu hlobo:bootstrap.Carousel.getOrCreateInstance(element)

Iziganeko

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

  • direction: Isalathiso apho icarousel islayida (nokuba "left"okanye "right").
  • relatedTarget: Isiqalelo seDOM esityibilikiswa kwindawo njengomba osebenzayo.
  • from: Isalathiso sento yangoku
  • to: Isalathiso senqaku elilandelayo

Yonke imisitho yecarousel ikhutshwa kwicarousel ngokwayo (okt kwi <div class="carousel">).

Uhlobo lomsitho Inkcazo
slide.bs.carousel Imililo ngoko nangoko xa kusenziwa slideumzekelo.
slid.bs.carousel Ikhutshiwe xa i-carousel igqibile inguqu yayo yesilayidi. 
var myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', function () {
  // do something...
})