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

Add an actual data-bs-touch="false" example in the carousel docs #32638

Merged
merged 9 commits into from Dec 29, 2020
Merged

Add an actual data-bs-touch="false" example in the carousel docs #32638

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
84f2f74
Add an actual `data-touch="false"` example in the carousel docs
patrickhlauke Dec 28, 2020
e0fa28f
Add missing -bs-
patrickhlauke Dec 28, 2020
5bf0e08
Merge branch 'main' into patrickhlauke-carousel-touch
patrickhlauke Dec 28, 2020
7608c04
Remove data-bs-ride attribute from example
patrickhlauke Dec 28, 2020
8873ec9
Correct attribute table explanation and remove slide class from example
patrickhlauke Dec 28, 2020
929b91c
Edits...
patrickhlauke Dec 28, 2020
ec2ac58
Add data-bs-interval to suppress autoplay
patrickhlauke Dec 28, 2020
7ed36cc
Tweak carousel options formatting
patrickhlauke Dec 28, 2020
4a26b33
Merge branch 'main' into patrickhlauke-carousel-touch
patrickhlauke Dec 29, 2020
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
40 changes: 34 additions & 6 deletions site/content/docs/5.0/components/carousel.md
View file
Open in desktop
Expand Up @@ -206,6 +206,34 @@ Add `data-bs-interval=""` to a `.carousel-item` to change the amount of time to
</div>
{{< /example >}}

### Suppressing touch swiping

By default, carousels support swiping left/right on touchscreen devices to move between slides. This can be explicitly suppressed using the `data-bs-touch` attribute. The example below also does not include the `data-bs-ride` attribute, and has `data-bs-interval="false"`, meaning that it won't autoplay.

{{< example >}}
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-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-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControlsNoTouching" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
{{< /example >}}

## Dark variant

Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and captions. Controls have been inverted from their default white fill with the `filter` CSS property. Captions and controls have additional Sass variables that customize the `color` and `background-color`.
Expand Down Expand Up @@ -286,7 +314,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td><code>interval</code></td>
<td>number</td>
<td><code>5000</code></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><code>keyboard</code></td>
Expand All @@ -297,15 +325,15 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<tr>
<td><code>pause</code></td>
<td>string | boolean</td>
<td><code>"hover"</code></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><code>'hover'</code></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><code>slide</code></td>
<td><code>ride</code></td>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wonder why this was slide all this time...

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, either I missed something, or we've had a typo in the options all along...

(admittedly it's the first time I've properly looked at our carousels, but still)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, it looks like it's a typo AFAICT. Going to merge this later.

<td>string | boolean</td>
<td><code>false</code></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><code>wrap</code></td>
Expand Down