diff options
author | Patrick H. Lauke <redux@splintered.co.uk> | 2021-01-03 14:06:58 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2021-01-29 00:32:24 +0300 |
commit | a882614c455fa0fb3014bd474df382e085263f56 (patch) | |
tree | daa71695c744920ffce65801ce869f963bb42357 /site | |
parent | 1fd34a1a2cbda6bcb55c206a1bae584c9f969923 (diff) |
Make carousel indicators actual buttons
Diffstat (limited to 'site')
-rw-r--r-- | site/content/docs/5.0/components/carousel.md | 30 | ||||
-rw-r--r-- | site/content/docs/5.0/examples/carousel-rtl/index.html | 10 | ||||
-rw-r--r-- | site/content/docs/5.0/examples/carousel/index.html | 10 | ||||
-rw-r--r-- | site/content/docs/5.0/examples/cheatsheet-rtl/index.html | 10 |
4 files changed, 30 insertions, 30 deletions
diff --git a/site/content/docs/5.0/components/carousel.md b/site/content/docs/5.0/components/carousel.md index bee325bb48..689e7a6aa2 100644 --- a/site/content/docs/5.0/components/carousel.md +++ b/site/content/docs/5.0/components/carousel.md @@ -78,11 +78,11 @@ You can also add the indicators to the carousel, alongside the controls, too. {{< example >}} <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel"> - <ol class="carousel-indicators"> - <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-indicators"> + <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> + <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button> + <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button> + </div> <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" >}} @@ -111,11 +111,11 @@ Add captions to your slides easily with the `.carousel-caption` element within a {{< example >}} <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel"> - <ol class="carousel-indicators"> - <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-indicators"> + <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> + <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button> + <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button> + </div> <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" >}} @@ -240,11 +240,11 @@ Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and cap {{< example >}} <div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel"> - <ol class="carousel-indicators"> - <li data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active"></li> - <li data-bs-target="#carouselExampleDark" data-bs-slide-to="1"></li> - <li data-bs-target="#carouselExampleDark" data-bs-slide-to="2"></li> - </ol> + <div class="carousel-indicators"> + <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> + <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button> + <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button> + </div> <div class="carousel-inner"> <div class="carousel-item active" data-bs-interval="10000"> {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#aaa" background="#f5f5f5" text="First slide" >}} diff --git a/site/content/docs/5.0/examples/carousel-rtl/index.html b/site/content/docs/5.0/examples/carousel-rtl/index.html index 30e7876f82..7f162efd04 100644 --- a/site/content/docs/5.0/examples/carousel-rtl/index.html +++ b/site/content/docs/5.0/examples/carousel-rtl/index.html @@ -37,11 +37,11 @@ extra_css: <main> <div id="myCarousel" class="carousel slide" data-bs-ride="carousel"> - <ol class="carousel-indicators"> - <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li> - <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li> - <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li> - </ol> + <div class="carousel-indicators"> + <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> + <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button> + <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button> + </div> <div class="carousel-inner"> <div class="carousel-item active"> {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}} diff --git a/site/content/docs/5.0/examples/carousel/index.html b/site/content/docs/5.0/examples/carousel/index.html index d9d9f702b6..da5f3ab7aa 100644 --- a/site/content/docs/5.0/examples/carousel/index.html +++ b/site/content/docs/5.0/examples/carousel/index.html @@ -36,11 +36,11 @@ extra_css: <main> <div id="myCarousel" class="carousel slide" data-bs-ride="carousel"> - <ol class="carousel-indicators"> - <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li> - <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li> - <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li> - </ol> + <div class="carousel-indicators"> + <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> + <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button> + <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button> + </div> <div class="carousel-inner"> <div class="carousel-item active"> {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}} diff --git a/site/content/docs/5.0/examples/cheatsheet-rtl/index.html b/site/content/docs/5.0/examples/cheatsheet-rtl/index.html index 712c583dd5..1770067688 100644 --- a/site/content/docs/5.0/examples/cheatsheet-rtl/index.html +++ b/site/content/docs/5.0/examples/cheatsheet-rtl/index.html @@ -862,11 +862,11 @@ direction: rtl <div> {{< example show_markup="false" >}} <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel"> - <ol class="carousel-indicators"> - <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-indicators"> + <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> + <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button> + <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button> + </div> <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="الشريحة الأولى" >}} |