Karusel
Karusel ýaly elementleriň üsti bilen tigir sürmek üçin slaýdşow komponenti - şekiller ýa-da tekst slaýdlary.
Bu nähili işleýär
Karusel, CSS 3D öwrülişikleri we birneme JavaScript bilen gurlan mazmunyň üsti bilen tigir sürmek üçin slaýdşowdyr. Birnäçe suratlar, tekst ýa-da ýörite bellik bilen işleýär. Şeýle hem, öňki / indiki dolandyryşlar we görkezijiler üçin goldawy öz içine alýar.
Page Visibility API goldanýan brauzerlerde , web sahypasy ulanyja görünmeýän mahaly karusel süýşmekden saklanar (meselem, brauzer goýmasy hereketsiz bolanda, brauzer penjiresi kiçeldilýär we ş.m.).
prefers-reduced-motion
media talaplaryna baglydyr. Elýeterlilik resminamalarymyzyň azaldylan hereket bölümine serediň
.
Höwürtgelenen karuselleriň goldanylmaýandygyny we karuselleriň adatça elýeterlilik standartlaryna laýyk gelmeýändigini ýadyňyzdan çykarmaň.
Mysal
Karuseller slaýd ölçeglerini awtomatiki kadalaşdyrmaýar. Şeýle bolansoň, mazmuny laýyk ölçemek üçin goşmaça kömekçi enjamlary ýa-da adaty stilleri ulanmagyňyz zerur bolup biler. Karuseller öňki / indiki dolandyryşlary we görkezijileri goldaýan bolsa-da, aç-açan talap edilmeýär. Isleýşiňiz ýaly goşuň we düzüň.
.active
Slaýdlaryň birine synp goşmaly, ýogsam karusel görünmez. Şeýle hem , aýratyn bir sahypada birnäçe karusel ulanýan bolsaňyz, goşmaça dolandyryşlar üçin özboluşly bir zady belläň id
. .carousel
Dolandyryş we görkeziji elementleriň elementiň gabat gelýän aýratynlygy (ýa-da baglanyşyklary üçin ) data-bs-target
bolmaly .href
id
.carousel
Diňe slaýdlar
Ine, diňe slaýdly karusel. Brauzeriň deslapky şekil deňleşmeginiň öňüni almak üçin .d-block
we karusel şekilleriniň bardygyna üns beriň ..w-100
<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>
Dolandyryş bilen
Öňki we indiki dolandyryşlara goşmak. Elementleri ulanmagy maslahat berýäris , ýöne elementleri <button>
hem ulanyp bilersiňiz .<a>
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>
Görkezijiler bilen
Görkezijiler bilen birlikde karusele görkezijileri hem goşup bilersiňiz.
<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>
Tionsazgylar bilen
Slaýdlaryňyza ýazgylary .carousel-caption
islendik element bilen aňsatlyk bilen goşuň .carousel-item
. Olary goşmaça görkeziş enjamlary bilen aşakda görkezilişi ýaly kiçi görnüşlerde aňsatlyk bilen gizläp bolýar . Ilki bilen gizleýäris .d-none
we orta ölçegli enjamlara getirýäris .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>
Haç
.carousel-fade
Slaýdlaryň ýerine dereksiz geçiş bilen slaýdlary janlandyrmak üçin karuseliňize goşuň .
<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>
Aýry -aýry .carousel-item
aralyk
Indiki elemente awtomatiki welosiped sürmegiň arasynda gijä galmak üçin wagt mukdaryny üýtgetmek üçin data-bs-interval=""
goşuň ..carousel-item
<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>
Duýgur süýşmegi öçüriň
Karuseller, slaýdlaryň arasynda hereket etmek üçin duýgur ekran enjamlarynda çepe / saga süýşmegi goldaýar. data-bs-touch
Bu atributdan peýdalanyp öçürilip bilner . Aşakdaky mysal data-bs-ride
atributy hem öz içine almaýar we data-bs-interval="false"
şonuň üçin awtomatiki görkezilmeýär.
<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>
Garaňky görnüş
Has garaňky dolandyryşlar, görkezijiler we ýazgylar üçin .carousel-dark
goşuň . Dolandyryşlar, CSS häsiýeti .carousel
bilen adaty ak doldurgyçdan üýtgedildi. Tionsazgylarda we dolandyryşlarda goşmaça we filter
Sass üýtgeýänleri bar .color
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>
Hususy geçiş
Geçirilen dowamlylygy Sass üýtgeýjisi .carousel-item
bilen $carousel-transition-duration
düzmezden ýa-da düzülen CSS-ni ulanýan bolsaňyz üýtgedip bilersiňiz. Birnäçe geçiş ulanylsa, ilki bilen geçişiň kesgitlenendigine göz ýetiriň (meselem transition: transform 2s ease, opacity .5s ease-out
).
Sass
Üýtgeýjiler
$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);
Ulanylyşy
Maglumat atributlary arkaly
Karuseliň ýagdaýyny aňsatlyk bilen dolandyrmak üçin maglumat atributlaryny ulanyň. data-bs-slide
açar sözleri kabul edýär prev
ýa-da next
slaýd ýagdaýyny häzirki ýagdaýyna görä üýtgedýär. Alterna- da bolmasa, slaýd ýagdaýyny başlaýan belli bir görkezijä geçirýän data-bs-slide-to
karusele çig slaýd indeksini geçirmek üçin ulanyň .data-bs-slide-to="2"
0
Bu data-bs-ride="carousel"
atribut, karuseli sahypa ýükünden başlap janlandyryjy hökmünde bellemek üçin ulanylýar. data-bs-ride="carousel"
Karuseliňizi başlatmak üçin ulanmasaňyz , ony özüňiz başlamalysyňyz. Şol bir karuseliň aç-açan JavaScript başlangyjy bilen (artykmaç we gereksiz) bilelikde ulanylyp bilinmez.
JavaScript arkaly
Karusel bilen el bilen jaň ediň:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
Görnüş
Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bs-
bolşy ýaly goşuň data-bs-interval=""
.
Ady | Görnüşi | Bellenen | Düşündiriş |
---|---|---|---|
interval |
sany | 5000 |
Bir elementi awtomatiki tigir sürmek arasynda gijä galmagyň wagty. false Karusel awtomatiki usulda aýlanmaz . |
keyboard |
boolean | true |
Karuseliň klawiatura hadysalaryna reaksiýa bermelimi. |
pause |
setir | boolean | 'hover' |
Gurnalan bolsa Duýgurlyk bilen işleýän enjamlarda, |
ride |
setir | boolean | false |
Ulanyjy birinji elementi el bilen aýlandan soň karuseli awtomatlaşdyrýar. Gurnalan bolsa 'carousel' , karuseli ýükde awtomatiki görkezýär. |
wrap |
boolean | true |
Karuseliň yzygiderli aýlanmalydygy ýa-da gaty duralgalary bolmaly. |
touch |
boolean | true |
Karuseliň duýgur ekran enjamlarynda çep / saga süýşürmek täsirini goldamalymy. |
Usullar
Asynkron usullar we geçişler
APIhli API usullary asynkron bolup, geçişe başlaýar . Geçiş başlan badyna, ýöne gutarmanka jaň edijä gaýdyp gelýärler . Mundan başga-da, geçiş komponentine çagyryş usuly hasaba alynmaz .
Has giňişleýin maglumat üçin JavaScript resminamalarymyza serediň .
Karusel konstruktory bilen karusel mysalyny döredip bilersiňiz, mysal üçin goşmaça wariantlar bilen başlamak we zatlaryň üsti bilen tigir sürmek üçin:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
Usul | Düşündiriş |
---|---|
cycle |
Karusel önümleriniň çepden saga aýlanmagy. |
pause |
Karuseliň zatlaryň üsti bilen tigir sürmegini bes edýär. |
prev |
Öňki elemente aýlawlar. Öňki element görkezilmezden (meselem, slid.bs.carousel waka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär. |
next |
Indiki elemente aýlawlar. Indiki element görkezilmezden (meselem, slid.bs.carousel waka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär. |
nextWhenVisible |
Sahypa görünmeýän ýa-da karusel ýa-da ene-atasy görünmeýän bolsa, indiki karuseli aýlamaň. Maksatly element görkezilmezden jaň edijä gaýdyp gelýär |
to |
Karuseli belli bir ramka aýlaýar (massiwlere meňzeş 0 esasly). Maksatly element görkezilmezden (meselem, slid.bs.carousel waka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär. |
dispose |
Bir elementiň karuselini ýok edýär. (DOM elementindäki saklanan maglumatlary aýyrýar) |
getInstance |
DOM elementi bilen baglanyşykly karusel mysalyny almaga mümkinçilik berýän statiki usul, ony şeýle ulanyp bilersiňiz:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
DOM elementi bilen baglanyşykly karusel mysalyny yzyna gaýtaryp berýän ýa-da başlamadyk ýagdaýynda täzesini döredýän statiki usul. Muny şeýle ulanyp bilersiňiz:bootstrap.Carousel.getOrCreateInstance(element) |
Wakalar
“Bootstrap” -yň karusel synpy karuseliň işlemegi üçin iki hadysany paş edýär. Iki hadysanyň hem aşakdaky goşmaça aýratynlyklary bar:
direction
: Karuseliň süýşýän ugry (ýa"left"
-da"right"
).relatedTarget
: Işjeň element hökmünde ýerine süýşürilýän DOM elementi.from
: Häzirki elementiň görkezijisito
: Indiki elementiň görkezijisi
Karusel hadysalarynyň hemmesi karuseliň özüne (ýagny <div class="carousel">
).
Çäräniň görnüşi | Düşündiriş |
---|---|
slide.bs.carousel |
Mysal usuly ulanylanda derrew slide ýanýar. |
slid.bs.carousel |
Karusel slaýd geçişini tamamlandan soň ýanýar. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})