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 ” goldaý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ň.
Iň soňunda bolsa, JavaScript-i çeşmeden gurýan bolsaňyz, talap edýärutil.js
.
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-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-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-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-target="#carouselExampleControls" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">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-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>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">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-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>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-target="#carouselExampleCaptions" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Haç
.carousel-fade
Slaýdlaryň ýerine dereksiz geçiş bilen slaýdlary janlandyrmak üçin karuseliňize goşuň . Karusel mazmunyňyza baglylykda (meselem, diňe tekst slaýdlary), dogry kesişmek üçin s .bg-body
-e käbir CSS goşup bilersiňiz..carousel-item
<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>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleFade" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">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-interval=""
goşuň ..carousel-item
<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>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleInterval" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">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-touch
Bu atributdan peýdalanyp öçürilip bilner . Aşakdaky mysal data-ride
atributy hem öz içine almaýar we data-interval="false"
şonuň üçin awtomatiki görkezilmeýär.
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-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-target="#carouselExampleControlsNoTouching" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Ulanylyşy
Maglumat atributlary arkaly
Karuseliň ýagdaýyny aňsatlyk bilen dolandyrmak üçin maglumat atributlaryny ulanyň. data-slide
açar sözleri kabul edýär prev
ýa-da next
slaýd ýagdaýyny häzirki ýagdaýyna görä üýtgedýär. Ativea- da bolmasa, slaýd ýagdaýyny başlaýan belli bir görkezijä geçirýän data-slide-to
çig slaýd indeksini karusele geçirmek üçin ulanyň .data-slide-to="2"
0
Bu data-ride="carousel"
atribut, karuseli sahypa ýükünden başlap janlandyryjy hökmünde bellemek üçin ulanylýar. data-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ň:
$('.carousel').carousel()
Görnüş
Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-
bolşy ýaly goşuň data-interval=""
.
Ady | Görnüşi | Bellenen | Düşündiriş |
---|---|---|---|
aralyk | sany | 5000 | Bir elementi awtomatiki tigir sürmek arasynda gijä galmagyň wagty. false Karusel awtomatiki usulda aýlanmaz . |
klawiatura | boolean | dogry | Karuseliň klawiatura hadysalaryna reaksiýa bermelimi. |
pauza | setir | boolean | 'aýlanmak' | Gurnalan bolsa Duýgurlyk bilen işleýän enjamlarda, awtomatiki usulda işe başlamazdan |
münmek | setir | ýalan | Ulanyjy birinji elementi el bilen aýlandan soň karuseli awtomatlaşdyrýar. Gurnalan bolsa 'carousel' , karuseli ýükde awtomatiki görkezýär. |
örtmek | boolean | dogry | Karuseliň yzygiderli aýlanmalydygy ýa-da gaty duralgalary bolmaly. |
degmek | boolean | dogry | 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ň .
.carousel(options)
Karuseli islege bagly görnüşler object
bilen başlaýar we zatlaryň üsti bilen tigir sürüp başlaýar.
$('.carousel').carousel({
interval: 2000
})
.carousel('cycle')
Karusel önümleriniň çepden saga aýlanmagy.
.carousel('pause')
Karuseliň zatlaryň üsti bilen tigir sürmegini bes edýär.
.carousel(number)
Karuseli belli bir ramka aýlaýar (massiwlere meňzeş 0 esasly). Maksatly element görkezilmezden (ýagny slid.bs.carousel
waka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär.
.carousel('prev')
Öňki elemente aýlawlar. Öňki element görkezilmezden (ýagny slid.bs.carousel
waka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär.
.carousel('next')
Indiki elemente aýlawlar. Indiki element görkezilmezden (ýagny slid.bs.carousel
waka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär.
.carousel('dispose')
Bir elementiň karuselini ýok edýär.
.carousel('nextWhenVisible')
Sahypa görünmeýän ýa-da karusel ýa-da ene-atasy görünmeýän mahaly karuseli indiki aýlawda goýmaň. Indiki element görkezilmezden (ýagny slid.bs.carousel
waka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär.
.carousel('to')
Karuseli belli bir ramka aýlaýar (massiwlere meňzeş 0 esasly). Indiki element görkezilmezden (ýagny slid.bs.carousel
waka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär.
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ş |
---|---|
slaýd.bs.carousel | slide Bu waka mysal usuly ulanylanda derrew ýanýar. |
slid.bs.carousel | Bu waka karusel slaýd geçişini tamamlandan soň atylýar. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
Geçiş dowamlylygyny üýtgediň
Geçirilen dowamlylygy Sass üýtgeýjisi .carousel-item
bilen $carousel-transition
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
).