Bootstrap 5 Carousel Disable Touch Swiping

Bootstrap5 CarouselDisable Touch Swiping can be used to disable the left/right swipe of the slides with touch on a touchscreen, by specifying the data-bs-touch attribute. Setting the data-bs-interval attribute as false will stop the autoplay of the slides.

Disable touch swiping Class: There is no class to disable touch-swiping.

Disable touch swiping Attribute:

• data-bs-touch: This attribute can set the touch swipe value to true or false.

Syntax:

<div class="carousel slide" data-bs-touch="*">
 <div class="carousel-inner">
 <div class="carousel-item active">
 ...
 </div>
 <div class="carousel-item">
 ...
 </div>
 <div class="carousel-item">
 ...
 </div>
 </div>
</div>

* can be replaced by true to enable touch wipe and false to disable touch swipe.

Example 1: The below code example demonstrates how we can Disable touch swiping and in the output, we can see that even after touch swiping the slides don't swipe.

Output:

Example 2: The below code example demonstrates how we can Disable touch swiping and add the time delay feature in a carousel with features of crossfade and controls for comparison, we have a carousel with enabled swiping below.

Output:

Reference: https://getbootstrap.com/docs/5.0/components/carousel/#disable-touch-swiping