Open In App

Bootstrap 5 Carousel Disable Touch Swiping

Last Updated : 15 Dec, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Carousel Disable touch swiping</title>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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>
            </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.




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!doctype html> 


<html lang="en"> 


  


<head> 


    <title>Carousel Disable touch swiping</title> 


    <link href= 


"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 


        rel="stylesheet"


        integrity= 


"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 


        crossorigin="anonymous"> 


    <script src= 


"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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> 


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


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


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


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


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


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    

                                        
                                        Suggest improvement
                                    

                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Bootstrap 5 Carousel Individual .carousel-item interval
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Bootstrap 5 Carousel Dark variant
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Bootstrap 5 Carousel Individual .carousel-item interval
            

        
    
        
            

                How to disable auto height for sliders by using React Bootstrap carousel?
            

        
    
        
            

                Image Carousel using react-native-snap-carousel package
            

        
    
        
            

                Bootstrap 4 | Carousel
            

        
    
        
            

                How to display bootstrap carousel with three post in each slide?
            

        
    
        
            

                How to wrap text around circular carousel in Bootstrap 4 ?
            

        
    
        
            

                How to Design Half-Page Carousel in Bootstrap ?
            

        
    
        
            

                Bootstrap 5 | Carousel
            

        
    
        
            

                How to fade in and fade out background with bootstrap text carousel ?
            

        
    
        
            

                How to change Bootstrap Carousel Interval at Runtime ?
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
P

        

            
        

        

                                    


                                    

                                        priyanshuchatterjee01                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox