Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 8 commits into from Jan 5, 2021
Merged

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

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ba6182a
v4: Add an actual `data-touch="false"` example in the carousel docs
patrickhlauke Dec 28, 2020
694f9ca
Remove data-ride from example carousel
patrickhlauke Dec 28, 2020
4cd5e47
Correct attribute table explanation and remove slide class from example
patrickhlauke Dec 28, 2020
49eafe1
Edits...
patrickhlauke Dec 28, 2020
3f19870
Add data-interval to suppress autoplay
patrickhlauke Dec 28, 2020
ae54c9b
Tweak carousel options formatting
patrickhlauke Dec 28, 2020
725ba2c
Update site/content/docs/4.5/components/carousel.md
patrickhlauke Jan 5, 2021
9b63d69
Tweak language
patrickhlauke Jan 5, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
38 changes: 33 additions & 5 deletions site/content/docs/4.5/components/carousel.md
View file
Open in desktop
Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down