From f1b2ed93dfb5346e32c8b2b58c6f444d6ad24c50 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Tue, 5 Jan 2021 23:42:55 +0000
Subject: [PATCH] v4: Add an actual `data-touch="false"` example in the
 carousel docs (#32639)

* 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>
---
 site/content/docs/4.5/components/carousel.md | 38 +++++++++++++++++---
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/site/content/docs/4.5/components/carousel.md b/site/content/docs/4.5/components/carousel.md
index c0675050c1e4..b8fac60d38b4 100644
--- a/site/content/docs/4.5/components/carousel.md
+++ b/site/content/docs/4.5/components/carousel.md
@@ -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>