mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-14 18:42:30 +03:00
Add bs in data attributes
- Add `bs` in data APIs everywhere - Update unit tests
This commit is contained in:
Rohit Sharma
@@ -22,14 +22,14 @@ Please be aware that nested carousels are not supported, and carousels are gener
|
||||
|
||||
Carousels don't automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they're not explicitly required. Add and customize as you see fit.
|
||||
|
||||
**The `.active` class needs to be added to one of the slides** otherwise the carousel will not be visible. Also be sure to set a unique id on the `.carousel` for optional controls, especially if you're using multiple carousels on a single page. Control and indicator elements must have a `data-target` attribute (or `href` for links) that matches the id of the `.carousel` element.
|
||||
**The `.active` class needs to be added to one of the slides** otherwise the carousel will not be visible. Also be sure to set a unique id on the `.carousel` for optional controls, especially if you're using multiple carousels on a single page. Control and indicator elements must have a `data-bs-target` attribute (or `href` for links) that matches the id of the `.carousel` element.
|
||||
|
||||
### Slides only
|
||||
|
||||
Here's a carousel with slides only. Note the presence of the `.d-block` and `.w-100` on carousel images to prevent browser default image alignment.
|
||||
|
||||
{{< example >}}
|
||||
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
|
||||
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}}
|
||||
@@ -49,7 +49,7 @@ Here's a carousel with slides only. Note the presence of the `.d-block` and `.w-
|
||||
Adding in the previous and next controls:
|
||||
|
||||
{{< example >}}
|
||||
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
|
||||
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}}
|
||||
@@ -61,11 +61,11 @@ Adding in the previous and next controls:
|
||||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
|
||||
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
|
||||
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
@@ -77,11 +77,11 @@ Adding in the previous and next controls:
|
||||
You can also add the indicators to the carousel, alongside the controls, too.
|
||||
|
||||
{{< example >}}
|
||||
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
|
||||
<div id="carouselExampleIndicators" class="carousel slide" data-bs-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>
|
||||
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
|
||||
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
|
||||
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
@@ -94,11 +94,11 @@ You can also add the indicators to the carousel, alongside the controls, too.
|
||||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
|
||||
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
|
||||
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
@@ -110,11 +110,11 @@ You can also add the indicators to the carousel, alongside the controls, too.
|
||||
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]({{< docsref "/utilities/display" >}}). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`.
|
||||
|
||||
{{< example >}}
|
||||
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
|
||||
<div id="carouselExampleCaptions" class="carousel slide" data-bs-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>
|
||||
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li>
|
||||
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li>
|
||||
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
@@ -139,11 +139,11 @@ Add captions to your slides easily with the `.carousel-caption` element within a
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
|
||||
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
|
||||
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
@@ -155,7 +155,7 @@ Add captions to your slides easily with the `.carousel-caption` element within a
|
||||
Add `.carousel-fade` to your carousel to animate slides with a fade transition instead of a slide.
|
||||
|
||||
{{< example >}}
|
||||
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
|
||||
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}}
|
||||
@@ -167,11 +167,11 @@ Add `.carousel-fade` to your carousel to animate slides with a fade transition i
|
||||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
|
||||
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
|
||||
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
@@ -180,26 +180,26 @@ Add `.carousel-fade` to your carousel to animate slides with a fade transition i
|
||||
|
||||
### 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.
|
||||
Add `data-bs-interval=""` to a `.carousel-item` to change the amount of time to delay between automatically cycling to the next item.
|
||||
|
||||
{{< example >}}
|
||||
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
|
||||
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active" data-interval="10000">
|
||||
<div class="carousel-item active" data-bs-interval="10000">
|
||||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}}
|
||||
</div>
|
||||
<div class="carousel-item" data-interval="2000">
|
||||
<div class="carousel-item" data-bs-interval="2000">
|
||||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" >}}
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
|
||||
<a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
|
||||
<a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
@@ -255,9 +255,9 @@ Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and cap
|
||||
|
||||
### 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`.
|
||||
Use data attributes to easily control the position of the carousel. `data-bs-slide` accepts the keywords `prev` or `next`, which alters the slide position relative to its current position. Alternatively, use `data-bs-slide-to` to pass a raw slide index to the carousel `data-bs-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. If you don't use `data-ride="carousel"` to initialize your carousel, you have to initialize it yourself. **It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.**
|
||||
The `data-bs-ride="carousel"` attribute is used to mark a carousel as animating starting at page load. If you don't use `data-bs-ride="carousel"` to initialize your carousel, you have to initialize it yourself. **It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.**
|
||||
|
||||
### Via JavaScript
|
||||
|
||||
@@ -270,7 +270,7 @@ var carousel = new bootstrap.Carousel(myCarousel)
|
||||
|
||||
### Options
|
||||
|
||||
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-interval=""`.
|
||||
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-interval=""`.
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
|
||||
Reference in New Issue
Block a user