mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 16:50:00 +02:00
Code Issues Releases Wiki Activity

feature(carousel): carousel-item interval (#26667)

Browse Source 
adds the ability to assign data-interval to an individual carousel-item
This commit is contained in:
Christopher Morrissey
2018-09-18 08:55:48 -04:00
committed by XhmikosR
parent e604958641
commit ea0faadde5
3 changed files with 85 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
site/docs/4.1/components/carousel.md
View File

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