Carousel

Qayb ka mid ah bandhigyada sawir-gacmeedka ee baaskiilka lagu dhex wado walxaha-sawirrada ama sawirada qoraalka-sida carousel-ka.

Sida ay u shaqeyso

Carouselku waa sawir-qaade loogu talagalay baaskiil wadista iyada oo loo marayo taxane taxane ah, oo lagu dhisay isbeddellada CSS 3D iyo xoogaa JavaScript ah. Waxay la shaqaysaa sawirro taxane ah, qoraal, ama calaamadayn gaar ah. Waxa kale oo ka mid ah taageerada kontaroolada hore/xiga iyo tilmaamayaasha.

Barowsarrada halka laga taageero Bogga Visibility API , carouselku wuxuu iska ilaalin doonaa simbiriirixinta marka bogga mareegaha uusan u muuqan isticmaaluhu (sida marka tabka browserku aanu shaqayn, daaqada browserka waa la yareeyey, iwm.).

Fadlan la soco in carousels buul leh aan la taageerin, iyo carousels guud ahaan ma waafaqsana heerarka gelitaanka.

Ugu dambeyntii, haddii aad ka dhisayso JavaScript-kayaga isha, waxay u baahan tahayutil.js .

Tusaale

Carousels si toos ah uma caadiyeeyaan cabbirrada slide. Sidan oo kale, waxaa laga yaabaa inaad u baahato inaad isticmaasho yutiilitida dheeraadka ah ama qaababka gaarka ah si aad u cabbirto nuxurka saxda ah. Halka carousels ay taageerto kontaroolada hore/xiga iyo tilmaamayaasha, si cad looguma baahna. Ku dar oo habbee sida aad ku habboon tahay.

Hubi inaad dejiso id gaar ah .carouselkantaroolka ikhtiyaariga ah, gaar ahaan haddii aad isticmaaleyso carousels badan hal bog.

Islaaydh kaliya

Halkan waxaa ah carousel oo leh sawirro kaliya. Ogsoonow joogitaanka .d-blockiyo .img-fluidsawirada carouselka si aad uga hortagto toosinta sawirka browserka.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

Iyadoo kontaroolada

Ku darida kontarooladii hore iyo kan xiga:

Hore Xiga

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </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>

Iyadoo tilmaamayaasha

Waxa kale oo aad ku dari kartaa tilmaamayaasha carouselka, oo ay weheliyaan kontaroolada, sidoo kale.

Hore Xiga

<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 class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </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>

Qoraalo wata

Ku dar qoraallada boggagaaga si fudud oo leh .carousel-captioncuriyaha ku jira mid kasta .carousel-item. Waxay si fudud loogu qarin karaa daawashada yaryar, sida hoos ku cad, oo leh qalab bandhig oo ikhtiyaari ah . Waanu ku qarinaa marka hore oo aanu .d-noneku soo celinaa aaladaha dhexdhexaadka ah ee leh .d-md-block.

Summada slide ee ugu horreysa

Nulla vitae elit libero, a pharetra augue mollis interdum.

Summada slide slide labaad

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Summada slide slide saddexaad

Preesent commodo cursus magna, vel scelerisque nisl consectetur.

Hore Xiga

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

Isticmaalka

Iyada oo loo marayo sifooyinka xogta

Isticmaal sifada xogta si aad si fudud u xakamayso booska carouselka. data-slideaqbala ereyada furaha prevama next, kaas oo beddela booska slide marka loo eego booska uu hadda joogo. Haddii kale, isticmaal data-slide-tosi aad u gudbiso tusaha slide ceeriin ee carousel data-slide-to="2", kaas oo u beddelaya booska slide index gaar ah oo ka bilaabma 0.

Sifada waxaa data-ride="carousel"loo isticmaalaa in lagu calaamadiyo carousel sida firfircoon ee ka bilaabma culeyska bogga. Looma isticmaali karo marka lagu daro (ka-soo-baxa iyo aan loo baahnayn) bilowga JavaScript cad ee isla carousel-ka.

Iyadoo loo marayo JavaScript

Si gacanta ah ula wac carousel:

$('.carousel').carousel()

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-, sida ku jira data-interval="".

Hababka

.carousel(options)

Waxay ku bilawday carousel-ka ikhtiyaar ikhtiyaari ah objectoo bilaabay inuu ku dhex wado alaabta.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

Wareegtada dhex mara alaabta carouselka bidix ilaa midig.

.carousel('pause')

Karoosalka ka joojiya in uu baaskiil ku dhex maro alaabta.

.carousel(number)

Wareega karooselka si uu u sameeyo jir gaar ah (0 ku salaysan, oo la mid ah array). Ku soo noqda qofka soo wacay ka hor inta aan la tusin shayga la beegsaday (tusaale ka hor intaanay slid.bs.carouseldhacdada dhicin).

.carousel('prev')

Wareegto shayga hore Ku soo noqda qofka soo wacay ka hor inta aan shaygii hore la muujin (tusaale ka hor intaanay slid.bs.carouseldhacdada dhicin).

.carousel('next')

Wareegto shayga xiga Ku soo noqda qofka soo wacay ka hor inta aan shayga xiga la muujin (tusaale ka hor intaanay slid.bs.carouseldhacdada dhicin).

.carousel('dispose')

Waxay baabi'isaa carousel-ka curiyaha.

Dhacdooyinka

Fasalka carousel ee Bootstrap wuxuu daaha ka qaadaa laba dhacdo oo loogu talagalay in lagu xidho shaqeynta carousel. Labada dhacdoba waxay leeyihiin waxyaabo dheeraad ah oo soo socda:

• direction: Jihada uu carouselku u sii jeedo (ama "left"ama "right").
• relatedTarget: Cunsurka DOM ee meesha lagu sibiibi sida shayga firfircoon.
• from: Tusmada shayga hadda jira
• to: Tusmada shayga xiga

Dhammaan dhacdooyinka carousel-ka waxaa lagu ridaa carouselka laftiisa (ie at the <div class="carousel">).

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})