Carousel a wɔde yɛ nneɛma

Slideshow afã bi a wɔde sakre fa element ahorow mu—mfonini anaa nsɛm a wɔakyerɛw ho mfonini—te sɛ carousel.

Sɛnea ɛyɛ adwuma

Carousel no yɛ slideshow a wɔde sakre tu fa nsɛm a ɛtoatoa so mu, a wɔde CSS 3D nsakrae ne JavaScript kakra na esii. Ɛde mfonini ahorow, nsɛm, anaa agyiraehyɛde a wɔahyɛ da ayɛ na ɛyɛ adwuma. Ɛsan nso ka mmoa a wɔde ma wɔ kan/a edi hɔ a wɔde di dwuma ne nsɛnkyerɛnnede ahorow ho.

Wɔ browser ahorow a wɔboa Page Visibility API no mu no, carousel no bɛkwati sɛ ɛbɛtwetwe bere a wɛbsaet krataafa no ntumi nhu nea ɔde di dwuma no (te sɛ bere a browser tab no nyɛ adwuma, browser window no ayɛ ketewaa, ne nea ɛkeka ho).

Yɛsrɛ wo hu sɛ wɔmfa nested carousels mmoa, na mpɛn pii no carousels nhyia gyinapɛn ahorow a ɛfa akwan a wɔfa so nya nneɛma ho.

Nea etwa to no, sɛ worekyekye yɛn JavaScript no afi fibea a, ɛhwehwɛ sɛutil.js .

Nhwɛsoɔ

Carousels ntumi nyɛ slide nsusuwii ahorow no sɛnea ɛte ankasa. Sɛnea ɛte no, ebia ɛho behia sɛ wode nneɛma foforo a wɔde di dwuma anaa akwan horow a wɔahyɛ da ayɛ di dwuma na ama woatumi ayɛ nneɛma no kɛse sɛnea ɛfata. Bere a carousels boa controls ne indicators a atwam/a edi hɔ no, ɛnyɛ nea wɔhwehwɛ pefee. Fa ka ho na yɛ nea wopɛ sɛnea wuhu sɛ ɛfata.

Ɛsɛ .activesɛ wɔde adesuakuw no ka slide ahorow no biako ho anyɛ saa a carousel no renhu. Afei nso hwɛ hu sɛ wode id soronko bi besi hɔ wɔ .carouselfor optional controls no so, titiriw sɛ wode carousels pii redi dwuma wɔ kratafa biako so a. Ɛsɛ sɛ control ne indicator elements no nya data-targetattribute (anaasɛ hrefma links) a ɛne .carouselelement no id hyia.

Slides nkutoo na ɛwɔ hɔ

Carousel a ɛwɔ slides nkutoo ni. Hyɛ .d-blockne .w-100wɔ carousel mfonini ahorow so no nsow na amma browser default mfonini ahorow no anhyehyɛ no.

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

Ne nneɛma a wɔde di dwuma

Sɛ wode ka ho wɔ controls a atwam ne nea edi hɔ no mu:

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

Ne nsɛnkyerɛnnede ahorow

Wubetumi nso de nsɛnkyerɛnne no aka carousel no ho, aka controls no ho, nso.

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

Ne nsɛm a wɔakyerɛw wɔ so

Add captions to your slides easily with the .carousel-caption element within any .carousel-item. They can be easily hidden on smaller viewports, as shown below, with optional display utilities. We hide them initially with .d-none and bring them back on medium-sized devices with .d-md-block.

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

Crossfade

Add .carousel-fade to your carousel to animate slides with a fade transition instead of a slide.

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

Individual .carousel-item interval

Add data-interval="" to a .carousel-item to change the amount of time to delay between automatically cycling to the next 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>

Usage

Via data attributes

Use data attributes to easily control the position of the carousel. data-slide accepts the keywords prev or next, which alters the slide position relative to its current position. Alternatively, use data-slide-to to pass a raw slide index to the carousel data-slide-to="2", which shifts the slide position to a particular index beginning with 0.

The data-ride="carousel" attribute is used to mark a carousel as animating starting at page load. It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.

Via JavaScript

Call carousel manually with:

$('.carousel').carousel()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-interval="".

Methods

.carousel(options)

Initializes the carousel with an optional options object and starts cycling through items.

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

.carousel('cycle')

Cycles through the carousel items from left to right.

.carousel('pause')

Stops the carousel from cycling through items.

.carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array). Returns to the caller before the target item has been shown (i.e. before the slid.bs.carousel event occurs).

.carousel('prev')

Cycles to the previous item. Returns to the caller before the previous item has been shown (i.e. before the slid.bs.carousel event occurs).

.carousel('next')

Cycles to the next item. Returns to the caller before the next item has been shown (i.e. before the slid.bs.carousel event occurs).

.carousel('dispose')

Destroys an element’s carousel.

Events

Bootstrap’s carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties:

• direction: The direction in which the carousel is sliding (either "left" or "right").
• relatedTarget: DOM element a wɔretwetwe akɔ ne gyinabea sɛ ade a ɛyɛ adwuma.
• from: Ade a ɛwɔ hɔ mprempren no ho index
• to: Ade a edi hɔ no ho index

Wɔtow carousel nsɛm a esisi nyinaa tow gu carousel no ankasa so (kyerɛ sɛ, wɔ <div class="carousel">).

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

Sesa nsakrae bere tenten

Nsakrae bere tenten a .carousel-itemwobetumi asesa ne $carousel-transitionSass variable ansa na woaboaboa ano anaasɛ custom styles sɛ wode CSS a wɔaboaboa ano no redi dwuma a. Sɛ wɔde nsakraeɛ dodoɔ bi di dwuma a, hwɛ sɛ wɔadi kan akyerɛkyerɛ nsakraeɛ nsakraeɛ no mu (sɛ nhwɛsoɔ no transition: transform 2s ease, opacity .5s ease-out).