Mobile touch

Bootstrap mobile touch gestures

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a huge discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount

Bootstrap mobile gestures are touch-based interactions with mobile devices. Various different fingers movements indicate particular component responses.

MDB provides you with support for the most common touch gestures.

Swipe gesture

Carousel with gestures support

Mobile - Material Design for Bootstrap

The Bootstrap allows to use touch support. It is setting to true by default.

If you want more information about carousel, please see our documentation.

Click on the button below to launch a live example and see the Carousel with gestures support in action.

Live preview
Edit in sandbox 
        
            

      <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="w-100 d-block" src="https://mdbootstrap.com/img/Photos/Slides/img%20(35).webp">
          </div>
          <div class="carousel-item">
            <img class="w-100 d-block" src="https://mdbootstrap.com/img/Photos/Slides/img%20(33).webp">
          </div>
          <div class="carousel-item">
            <img class="w-100 d-block" src="https://mdbootstrap.com/img/Photos/Slides/img%20(31).webp">
          </div>
        </div>
      </div>

    
        
    
        
            
      $('.carousel').carousel({
        touch: true // default
      })

Here is an example with touch support setting to false. Touch support will not work with that.

Live preview
Edit in sandbox 
        
            

      <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="w-100 d-block" src="https://mdbootstrap.com/img/Photos/Slides/img%20(35).webp">
          </div>
          <div class="carousel-item">
            <img class="w-100 d-block" src="https://mdbootstrap.com/img/Photos/Slides/img%20(33).webp">
          </div>
          <div class="carousel-item">
            <img class="w-100 d-block" src="https://mdbootstrap.com/img/Photos/Slides/img%20(31).webp">
          </div>
        </div>
      </div>

    
        
    
        
            
      $('.carousel').carousel({
        touch:false
      })