mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-21 04:41:36 +02:00
Carousel: use buttons, not links, for prev/next controls (#32627)
* Carousel: use buttons, not links, for prev/next - expand the styles to neutralise border/background - change docs page - add extra unit test to check that links or buttons work as controls - modify visual test to use buttons as well - use buttons instead of links for prev/next - remove `role="button"` from links that are actually links * Clarify that controls can be button or link * Update site/content/docs/5.0/components/carousel.md Co-authored-by: Mark Otto <markd.otto@gmail.com> * Explicitly set padding to 0 to prevent dipping/moving on active in Firefox Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
Patrick H. Lauke
GitHub
@@ -22,7 +22,7 @@ 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-bs-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
|
||||
|
||||
@@ -46,7 +46,7 @@ Here's a carousel with slides only. Note the presence of the `.d-block` and `.w-
|
||||
|
||||
### With controls
|
||||
|
||||
Adding in the previous and next controls:
|
||||
Adding in the previous and next controls. We recommend using `<button>` elements, but you can also use `<a>` elements with `role="button"`.
|
||||
|
||||
{{< example >}}
|
||||
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
|
||||
@@ -61,14 +61,14 @@ 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-bs-slide="prev">
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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-bs-slide="next">
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
@@ -94,14 +94,14 @@ 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-bs-slide="prev">
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" 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-bs-slide="next">
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
@@ -139,14 +139,14 @@ 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-bs-slide="prev">
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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-bs-slide="next">
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
@@ -167,14 +167,14 @@ 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-bs-slide="prev">
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" 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-bs-slide="next">
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
@@ -195,14 +195,14 @@ Add `data-bs-interval=""` to a `.carousel-item` to change the amount of time to
|
||||
{{< 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-bs-slide="prev">
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" 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-bs-slide="next">
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
@@ -223,14 +223,14 @@ Carousels support swiping left/right on touchscreen devices to move between slid
|
||||
{{< 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="#carouselExampleControlsNoTouching" role="button" data-bs-slide="prev">
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" 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="#carouselExampleControlsNoTouching" role="button" data-bs-slide="next">
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
@@ -268,14 +268,14 @@ Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and cap
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#carouselExampleDark" role="button" data-bs-slide="prev">
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" 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="#carouselExampleDark" role="button" data-bs-slide="next">
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
|
||||
@@ -74,14 +74,14 @@ extra_css:
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev">
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">السابق</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next">
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">التالى</span>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -73,14 +73,14 @@ extra_css:
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev">
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" 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="#myCarousel" role="button" data-bs-slide="next">
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user