rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

v4: Add an actual data-touch="false" example in the carousel docs (#32639)

Browse Source 
* v4: Add an actual `data-touch="false"` example in the carousel docs

Backport of https://github.com/twbs/bootstrap/pull/32638

* Remove data-ride from example carousel

* Correct attribute table explanation and remove slide class from example

i believe the correct option is `slide` here, not `ride`.
the `if "carousel"` bit was rather unclear/confusing

* Edits...

sorry, trying to make sense of our quirky carousel stuff, it seems some illogical things have been there ever since

* Add data-interval to suppress autoplay

* Tweak carousel options formatting

* Update site/content/docs/4.5/components/carousel.md

Co-authored-by: Mark Otto <markd.otto@gmail.com>

* Tweak language

mostly based on @mdo's suggestion, but also adds the word "attribute" after `data-ride` for better flow/legibility

Co-authored-by: Mark Otto <markd.otto@gmail.com>
This commit is contained in:
Patrick H. Lauke 2021-01-05 23:42:55 +00:00 committed by GitHub
parent 4fc35bdc3c
commit f1b2ed93df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 33 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
site/content/docs/4.5/components/carousel.md
View File

@ -208,6 +208,34 @@ Add `data-interval=""` to a `.carousel-item` to change the amount of time to del
</div>
{{< /example >}}
### Disable touch swiping
Carousels support swiping left/right on touchscreen devices to move between slides. This can be disabled using the `data-touch` attribute. The example below also does not include the `data-ride` attribute and has `data-interval="false"` so it doesn't autoplay.
{{< example >}}
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-interval="false">
<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" >}}
</div>
<div class="carousel-item">
{{< 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="#carouselExampleControlsNoTouching" 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="#carouselExampleControlsNoTouching" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
{{< /example >}}
## Usage
### Via data attributes
@ -242,7 +270,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td>interval</td>
<td>number</td>
<td>5000</td>
<td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td>
<td>The amount of time to delay between automatically cycling an item. If <code>false</code>, carousel will not automatically cycle.</td>
</tr>
<tr>
<td>keyboard</td>
@ -253,15 +281,15 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<tr>
<td>pause</td>
<td>string | boolean</td>
<td>"hover"</td>
<td><p>If set to <code>"hover"</code>, pauses the cycling of the carousel on <code>mouseenter</code> and resumes the cycling of the carousel on <code>mouseleave</code>. If set to <code>false</code>, hovering over the carousel won't pause it.</p>
<p>On touch-enabled devices, when set to <code>"hover"</code>, cycling will pause on <code>touchend</code> (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.</p></td>
<td>'hover'</td>
<td><p>If set to <code>'hover'</code>, pauses the cycling of the carousel on <code>mouseenter</code> and resumes the cycling of the carousel on <code>mouseleave</code>. If set to <code>false</code>, hovering over the carousel won't pause it.</p>
<p>On touch-enabled devices, when set to <code>'hover'</code>, cycling will pause on <code>touchend</code> (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.</p></td>
</tr>
<tr>
<td>ride</td>
<td>string</td>
<td>false</td>
<td>Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.</td>
<td>Autoplays the carousel after the user manually cycles the first item. If set to <code>'carousel'</code>, autoplays the carousel on load.</td>
</tr>
<tr>
<td>wrap</td>