diff options
Diffstat (limited to 'site/content/docs/5.0/components/carousel.md')
| -rw-r--r-- | site/content/docs/5.0/components/carousel.md | 22 |
1 files changed, 11 insertions, 11 deletions
diff --git a/site/content/docs/5.0/components/carousel.md b/site/content/docs/5.0/components/carousel.md index 935779238c..e131b502b9 100644 --- a/site/content/docs/5.0/components/carousel.md +++ b/site/content/docs/5.0/components/carousel.md @@ -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-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 that matches the id of the `.carousel` element. ### Slides only @@ -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 href="#" class="carousel-control-prev" data-target="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next"> + <a href="#" class="carousel-control-next" data-target="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> @@ -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 href="#" class="carousel-control-prev" data-target="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next"> + <a href="#" class="carousel-control-next" data-target="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> @@ -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 href="#" class="carousel-control-prev" data-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next"> + <a href="#" class="carousel-control-next" data-target="#carouselExampleCaptions" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> @@ -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 href="#" class="carousel-control-prev" data-target="#carouselExampleFade" 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="#carouselExampleFade" role="button" data-slide="next"> + <a href="#" class="carousel-control-next" data-target="#carouselExampleFade" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> @@ -195,11 +195,11 @@ 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" >}} </div> </div> - <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev"> + <a href="#" class="carousel-control-prev" data-target="#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"> + <a href="#" class="carousel-control-next" data-target="#carouselExampleInterval" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> |