Bootstrap5 Carousel Disable 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.
<!DOCTYPE html> < html lang = "en" >
< head >
< title >Carousel Disable touch swiping</ title >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" >
< script src =
integrity =
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" >
</ script >
</ head >
< body >
< h1 class = "m-4 text-success" >
GeeksforGeeks
</ h1 >
< h4 class = "ms-4" >
Bootstrap 5 Carousel Disable touch swiping
</ h4 >
< div class = "container mb-4 p-4" >
< div id = "carouselExample" class = "carousel slide" data-bs-touch = "false" >
< div class = "carousel-inner text-light text-center" >
< div class = "carousel-item bg-dark active" data-bs-interval = "2000" >
< h1 class = "m-4 text-success" >
This is the first slide
</ h1 >
< h4 class = "ms-4" >
This slide has a time delay of 2000ms
</ h4 >
</ div >
< div class = "carousel-item bg-dark" data-bs-interval = "4000" >
< h1 class = "m-4 text-danger" >
This is the second slide
</ h1 >
< h4 class = "ms-4" >
This slide has a time delay of 4000ms
</ h4 >
</ div >
< div class = "carousel-item bg-dark" data-bs-interval = "6000" >
< h1 class = "m-4 text-warning" >
This is the third slide
</ h1 >
< h4 class = "ms-4" >
This slide has a time delay of 6000ms
</ h4 >
</ div >
</ div >
< button class = "carousel-control-prev" type = "button" data-bs-target = "#carouselExample" data-bs-slide = "prev" >
< span class = "carousel-control-prev-icon" ></ span >
< span class = "visually-hidden" >
Previous
</ span >
</ button >
< button class = "carousel-control-next" type = "button" data-bs-target = "#carouselExample" data-bs-slide = "next" >
< span class = "carousel-control-next-icon" ></ span >
< span class = "visually-hidden" >
Next
</ span >
</ button >
</ div >
</ div >
</ body >
</ html >
|
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.
<!doctype html> < html lang = "en" >
< head >
< title >Carousel Disable touch swiping</ title >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" >
< script src =
integrity =
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" >
</ script >
</ head >
< body >
< h1 class = "m-4 text-success" >
GeeksforGeeks
</ h1 >
< h4 class = "ms-4" >
Bootstrap 5 Carousel Disable touch swiping
</ h4 >
< div class="container mb-4 p-4
text-light text-center">
< div id = "carouselExample" class = "carousel slide carousel-fade mb-4" data-bs-touch = "false"
data-bs-interval = "false" >
< div class = "carousel-inner" >
< div class = "carousel-item bg-dark active pb-4" >
< h1 class = "m-4 text-success" >
This is the first slide
</ h1 >
< img src =
width = "25%"
alt = "GFG LOGO" >
</ div >
< div class = "carousel-item bg-dark pb-4" >
< h1 class = "m-4 text-warning text-center" >
This is the second slide
</ h1 >
< div class = "text-center" >
< img src =
width = "25%" alt = "GFG LOGO" >
</ div >
</ div >
< div class = "carousel-item bg-dark pb-4" >
< h1 class = "m-4 text-warning" >
This is the third slide
</ h1 >
< div class = "text-center" >
< img src =
width = "25%" alt = "GFG LOGO" >
</ div >
</ div >
</ div >
< button class = "carousel-control-prev" type = "button" data-bs-target = "#carouselExample" data-bs-slide = "prev" >
< span class = "carousel-control-prev-icon" ></ span >
< span class = "visually-hidden" >
Previous
</ span >
</ button >
< button class = "carousel-control-next" type = "button" data-bs-target = "#carouselExample" data-bs-slide = "next" >
< span class = "carousel-control-next-icon" ></ span >
< span class = "visually-hidden" >
Next
</ span >
</ button >
</ div >
< div id = "carouselExample2" class = "carousel slide carousel-fade" data-bs-ride = "carousel"
data-bs-interval = "false" >
< div class = "carousel-inner" >
< div class = "carousel-item bg-dark active pb-4" >
< h1 class = "m-4 text-success" >
This is the first slide
</ h1 >
< img src =
width = "25%" alt = "GFG LOGO" >
</ div >
< div class = "carousel-item bg-dark pb-4" >
< h1 class = "m-4 text-warning text-center" >
This is the second slide
</ h1 >
< div class = "text-center" >
< img src =
width = "25%" alt = "GFG LOGO" >
</ div >
</ div >
< div class = "carousel-item bg-dark pb-4" >
< h1 class = "m-4 text-warning" >
This is the third slide
</ h1 >
< div class = "text-center" >
< img src =
width = "25%" alt = "GFG LOGO" >
</ div >
</ div >
</ div >
< button class = "carousel-control-prev" type = "button" data-bs-target = "#carouselExample2" data-bs-slide = "prev" >
< span class = "carousel-control-prev-icon" ></ span >
< span class = "visually-hidden" >
Previous
</ span >
</ button >
< button class = "carousel-control-next" type = "button"
data-bs-target = "#carouselExample2" data-bs-slide = "next" >
< span class = "carousel-control-next-icon" ></ span >
< span class = "visually-hidden" >
Next
</ span >
</ button >
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/carousel/#disable-touch-swiping