Tsibela kumxholo ophambili Tsiba uye kukhangelo lwamaxwebhu
Check
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.

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

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

html 
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
  <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.

html 
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
  <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. Kuxhomekeka kumxholo wakho wecarousel (umzekelo, okubhaliweyo kuphela izilayidi), unokufuna ukudibanisa .bg-bodyokanye isiko leCSS kwi .carousel-items ngokunqamleza okufanelekileyo.

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

html 
<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. Umzekelo ongezantsi nawo awubandakanyi data-bs-rideuphawu ngoko ke aludlali ngokuzenzekelayo.

html 
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="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.

html 
<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 iinguqulelo ezininzi zisetyenziswa, qiniseka ukuba inguqu yenguqu ichazwa kuqala (umz transition: transform 2s ease, opacity .5s ease-out.).

Sass

Izinto eziguquguqukayo

Izinto eziguquguqukayo kuzo zonke iicarousels:

$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`)

Izinto eziguquguqukayo zecarousel emnyama :

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

const carousel = new bootstrap.Carousel('#myCarousel')

Iinketho

Njengoko iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript, unokongeza igama lokhetho ku data-bs-, njengakwi data-bs-animation="{value}". Qinisekisa ukuba utshintshe uhlobo lwecala legama lokukhetha ukusuka kwi " camelCase " ukuya kwi " kebab-case " xa udlula iinketho ngeempawu zedatha. Umzekelo, sebenzisa data-bs-custom-class="beautifier"endaweni ye- data-bs-customClass="beautifier".

Ukusukela kwi-Bootstrap 5.2.0, onke amacandelo axhasa umlinganiso wedatha ogciniweyo wovavanyodata-bs-config onokubeka uqwalaselo lwecandelo olulula njengomtya we-JSON. Xa into ineempawu data-bs-config='{"delay":0, "title":123}'kunye data-bs-title="456"neempawu, ixabiso lokugqibela titleliya kuba 456kunye neempawu zedatha eyahlukileyo ziya kuwenza ngaphezulu amaxabiso anikiweyo data-bs-config. Ukongeza, iimpawu zedatha ezikhoyo ziyakwazi ukubeka ixabiso le-JSON njenge data-bs-delay='{"show":0,"hide":150}'.

Igama Uhlobo Ukuhlala kukho Inkcazo
interval inani 5000 Ubungakanani bexesha lokulibaziseka phakathi kokubhayisela ngokuzenzekelayo into.
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. Oku kukongeza kwindlela yokuziphatha ye mouse.
ride umtya, boolean false Ukuba imiselwe ku- true, idlala ngokuzenzekelayo i-carousel emva kokuba umsebenzisi ajikelezise into yokuqala. Ukuba imiselwe ku- "carousel", idlala ngokuzenzekelayo ikharouse elayishiweyo.
touch boolean true Nokuba i-carousel kufuneka ixhase ukuswayipha ekhohlo/ekunene kwizixhobo zescreen sokuchukumisa.
wrap boolean true Nokuba i-carousel kufuneka iqhubeke ijikeleza okanye ibe neendawo zokumisa nzima.

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:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
Indlela Inkcazo
cycle Ujikeleza izinto zecarousel ukusuka ekhohlo ukuya ekunene.
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):.
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 .
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).
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).

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

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

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

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})