diff options
| author | Christopher Morrissey <[email protected]> | 2018-09-18 08:55:48 -0400 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2018-09-18 15:55:48 +0300 |
| commit | ea0faadde5c222cdd8127332b62a6d565a055d80 (patch) | |
| tree | 6292c56e10eb63ae2a8b42491aee6aedbd879504 /site/docs | |
| parent | e6049586413f663ae99ec660d6378306833e2223 (diff) | |
| download | bootstrap-ea0faadde5c222cdd8127332b62a6d565a055d80.tar.xz bootstrap-ea0faadde5c222cdd8127332b62a6d565a055d80.zip | |
feature(carousel): carousel-item interval (#26667)
adds the ability to assign data-interval to an individual carousel-item
Diffstat (limited to 'site/docs')
| -rw-r--r-- | site/docs/4.1/components/carousel.md | 29 |
1 files changed, 29 insertions, 0 deletions
diff --git a/site/docs/4.1/components/carousel.md b/site/docs/4.1/components/carousel.md index 7c4a0472e..543b06430 100644 --- a/site/docs/4.1/components/carousel.md +++ b/site/docs/4.1/components/carousel.md @@ -190,6 +190,35 @@ Add `.carousel-fade` to your carousel to animate slides with a fade transition i {% endcapture %} {% include example.html content=example %} +### 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. + +{% capture example %} +<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel"> + <div class="carousel-inner"> + <div class="carousel-item active" data-interval="10000"> + <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide"> + </div> + <div class="carousel-item" data-interval="20000"> + <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide"> + </div> + <div class="carousel-item"> + <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide"> + </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> +{% endcapture %} +{% include example.html content=example %} + ## Usage |