Source

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

Bu komponentiň animasiýa täsiri prefers-reduced-motionmedia 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üň.

.activeSlaýdlaryň birine synp goşmaly, ýogsam karusel görünmez. .carouselMundan başga-da , aýratyn bir sahypada birnäçe karusel ulanýan bolsaňyz, islege bagly dolandyryşlar üçin özboluşly id goýmagy unutmaň . Dolandyryş we görkeziji elementleriň elementiň idine gabat gelýän data-targetatributy bolmaly (ýa-da baglanyşyklar üçin) .href.carousel

Diňe slaýdlar

Ine, diňe slaýdly karusel. Brauzeriň deslapky şekil deňleşmeginiň öňüni almak üçin .d-blockwe 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:

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

Görkezijiler bilen

Şeýle hem dolandyryş elementleri bilen birlikde karusele görkezijileri 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>
  <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>

Tionsazgylar bilen

Slaýdlaryňyza ýazgylary .carousel-captionislendik 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-nonewe orta ölçegli enjamlara getirýäris .d-md-block.

<div class="bd-example">
  <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>
</div>

Haç

.carousel-fadeSlaýdlaryň ýerine dereksiz geçiş bilen slaýdlary janlandyrmak üçin karuseliňize goşuň .

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

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

Ulanylyşy

Maglumat atributlary arkaly

Karuseliň ýagdaýyny aňsatlyk bilen dolandyrmak üçin maglumat atributlaryny ulanyň. data-slideaçar sözleri kabul edýär prevýa-da nextslaý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. Falsealan bolsa, karusel awtomatiki usulda aýlanmaz.
klawiatura boolean dogry Karuseliň klawiatura hadysalaryna reaksiýa bermelimi.
pauza setir | boolean "aýlaw"

Gurnalan bolsa "hover", karuseliň tigir sürmegini duruzýar we karuseliň mouseentertigir sürmegini dowam etdirýär mouseleave. Eger sazlanan bolsa false, karuseliň üstünde gezmek ony saklamaz.

Duýgurlyk bilen işleýän enjamlarda, awtomatiki usulda işe başlamazdan "hover"welosiped sürmek (ulanyjy karusel bilen gatnaşygy gutarandan soň) iki aralykda durar. touchendMunuň ýokardaky syçanjygyň özüni alyp barşyna goşmaça üns beriň.
münmek setir ýalan Ulanyjy birinji elementi el bilen aýlandan soň karuseli awtomatlaşdyrýar. "Karusel" bolsa, 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 objectbilen 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.carouselwaka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär.

.carousel('prev')

Öňki elemente aýlawlar. Öňki element görkezilmezden (ýagny slid.bs.carouselwaka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär.

.carousel('next')

Indiki elemente aýlawlar. Indiki element görkezilmezden (ýagny slid.bs.carouselwaka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär.

.carousel('dispose')

Bir elementiň karuselini ýok edýä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örkezijisi
  • to: 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 slideBu 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-itembilen $carousel-transitiondü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).