rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-30 22:52:24 +01:00
Code Issues Actions Packages Releases Activity

Manual backport of #32627 (#33165)

Browse Source 
Carousel: use buttons, not links, for prev/next controls
This commit is contained in:
Patrick H. Lauke 2021-03-11 07:23:46 +00:00 committed by GitHub
parent 7365592fbe
commit e16b06929a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 38 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.bundlewatch.config.json
View File

@ -18,7 +18,7 @@
}, },
{ {
"path": "./dist/css/bootstrap.css", "path": "./dist/css/bootstrap.css",
"maxSize": "25.5 kB" "maxSize": "26 kB"
}, },
{ {
"path": "./dist/css/bootstrap.min.css", "path": "./dist/css/bootstrap.min.css",

8
js/tests/visual/carousel.html
View File

@ -34,14 +34,14 @@
<img src="https://i.imgur.com/Nm7xoti.jpg" alt="Third slide"> <img src="https://i.imgur.com/Nm7xoti.jpg" alt="Third slide">
</div> </div>
</div> </div>
<a class="carousel-control-prev" href="#carousel-example-generic" role="button" data-slide="prev"> <button class="carousel-control-prev" data-target="#carousel-example-generic" type="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
</a> </button>
<a class="carousel-control-next" href="#carousel-example-generic" role="button" data-slide="next"> <button class="carousel-control-next" data-target="#carousel-example-generic" type="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span> <span class="sr-only">Next</span>
</a> </button>
</div> </div>
</div> </div>

3
scss/_carousel.scss
View File

@ -95,8 +95,11 @@
align-items: center; // 2. vertically center contents align-items: center; // 2. vertically center contents
justify-content: center; // 3. horizontally center contents justify-content: center; // 3. horizontally center contents
width: $carousel-control-width; width: $carousel-control-width;
padding: 0;
color: $carousel-control-color; color: $carousel-control-color;
text-align: center; text-align: center;
background: none;
border: 0;
opacity: $carousel-control-opacity; opacity: $carousel-control-opacity;
@include transition($carousel-control-transition); @include transition($carousel-control-transition);

52
site/content/docs/4.6/components/carousel.md
View File

@ -24,7 +24,7 @@ Lastly, if you're building our JavaScript from source, it [requires `util.js`]({
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. 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-target` attribute (or `href` for links) that matches the `id` of the `.carousel` element.
### Slides only ### Slides only
@ -48,7 +48,7 @@ Here's a carousel with slides only. Note the presence of the `.d-block` and `.w-
### With controls ### 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 >}} {{< example >}}
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
@ -63,14 +63,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" >}} {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
</div> </div>
</div> </div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
</a> </button>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span> <span class="sr-only">Next</span>
</a> </button>
</div> </div>
{{< /example >}} {{< /example >}}
@ -96,14 +96,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" >}} {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
</div> </div>
</div> </div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
</a> </button>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span> <span class="sr-only">Next</span>
</a> </button>
</div> </div>
{{< /example >}} {{< /example >}}
@ -141,14 +141,14 @@ Add captions to your slides easily with the `.carousel-caption` element within a
</div> </div>
</div> </div>
</div> </div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev"> <button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
</a> </button>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next"> <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span> <span class="sr-only">Next</span>
</a> </button>
</div> </div>
{{< /example >}} {{< /example >}}
@ -169,14 +169,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" >}} {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
</div> </div>
</div> </div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev"> <button class="carousel-control-prev" type="button" data-target="#carouselExampleFade" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
</a> </button>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next"> <button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span> <span class="sr-only">Next</span>
</a> </button>
</div> </div>
{{< /example >}} {{< /example >}}
@ -197,14 +197,14 @@ Add `data-interval=""` to a `.carousel-item` to change the amount of time to del
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}} {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
</div> </div>
</div> </div>
<a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev"> <button class="carousel-control-prev" type="button" data-target="#carouselExampleInterval" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
</a> </button>
<a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next"> <button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span> <span class="sr-only">Next</span>
</a> </button>
</div> </div>
{{< /example >}} {{< /example >}}
@ -225,14 +225,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" >}} {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
</div> </div>
</div> </div>
<a class="carousel-control-prev" href="#carouselExampleControlsNoTouching" role="button" data-slide="prev"> <button class="carousel-control-prev" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
</a> </button>
<a class="carousel-control-next" href="#carouselExampleControlsNoTouching" role="button" data-slide="next"> <button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span> <span class="sr-only">Next</span>
</a> </button>
</div> </div>
{{< /example >}} {{< /example >}}

8
site/content/docs/4.6/examples/carousel/index.html
View File

@ -71,14 +71,14 @@ extra_css:
</div> </div>
</div> </div>
</div> </div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> <button class="carousel-control-prev" type="button" data-target="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
</a> </button>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> <button class="carousel-control-next" type="button" data-target="#myCarousel" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span> <span class="sr-only">Next</span>
</a> </button>
</div> </div>