Bootstrap 5 Carousel Disable Touch Swiping

Last Updated : 15 Dec, 2022

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=

"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"

rel="stylesheet"

integrity=

"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"

crossorigin="anonymous">

<script src=

"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"

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>

<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>

</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=

"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"

rel="stylesheet"

integrity=

"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"

crossorigin="anonymous">

<script src=

"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"

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=

"http://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200-1.png"

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=

"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"

width="25%" alt="GFG LOGO">

</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=

"https://media.geeksforgeeks.org/wp-content/uploads/20221128115907/gfglogo.png"

width="25%" alt="GFG LOGO">

</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=

"http://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200-1.png"

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=

"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"

width="25%" alt="GFG LOGO">

</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=

"https://media.geeksforgeeks.org/wp-content/uploads/20221128115907/gfglogo.png"

width="25%" alt="GFG LOGO">

</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>

</body>

</html>

Output:

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

Here's a complete roadmap for you to become a developer: Learn DSA -> Master Frontend/Backend/Full Stack -> Build Projects -> Keep Applying to Jobs

And why go anywhere else when our DSA to Development: Coding Guide helps you do this in a single program! Apply now to our DSA to Development Program and our counsellors will connect with you for further guidance & support.

Like Article

Suggest improvement

Share your thoughts in the comments

Bootstrap 5 Carousel Disable Touch Swiping

Bootstrap 5 Carousel Disable Touch Swiping

Syntax:

Recommend

React component to handle swiping on touch

Weird lags when swiping up on iOS 14

Media Bar lets you scrub your music or podcasts by swiping on your status bar

Jetpack Compose: Tabs with swiping

A simple Tinder like swipe component for swiping cards

Tinder's new Music Mode makes swiping a bit more fun

Swiping vs Tapping, What is Less Distracting to Drivers?

Google Messages is about to be more into swiping than Tinder

How to Temporarily Disable Face ID or Touch ID, and Require a Passcode to Unlock...

Tired of swiping left, singles turn to new matchmaking services

About Joyk