Warning: session_start(): open(/var/lib/php/fpm/session/sess_dl4im187d7kppttdgvt3jdefer, O_RDWR) failed: No such file or directory (2) in /var/www/tst02/wp-content/plugins/wordpress-social-login/wp-social-login.php on line 64

Warning: session_start(): Failed to read session data: files (path: /var/lib/php/fpm/session) in /var/www/tst02/wp-content/plugins/wordpress-social-login/wp-social-login.php on line 64
Vue Mobile - Bootstrap 4 & Material Design. Examples & tutorial - Material Design for Bootstrap

Vue Bootstrap MobileMDB Pro component

Vue Mobile - Bootstrap 4 & Material Design

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

MDB provides you support for most common touch gestures.

Pan gesture
Press gesture
Tap gesture
Swipe gesture
Pinch gesture

Carousel with gestures support

Mobile - Material Design for Bootstrap

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

Live preview

To make it work, use the prop touch together with one of MDB carousel components.


        <template>
          <mdb-container>
            <mdb-carousel :items="basicCarousel" indicators touch></mdb-carousel>
          </mdb-container>
        </template>
      

        <script>
          import { mdbCarousel, mdbContainer } from 'mdbvue';
          export default {
            name: 'MobilePage',
            components: {
              mdbCarousel,
              mdbContainer
            },
            data() {
              return {
                basicCarousel: [
                  {
                    img: true,
                    src: "https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg",
                    mask: "black-light",
                    alt: "First Slide",
                    caption: {
                      title: "First slide"
                    }
                  },
                  {
                    img: true,
                    src: "https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg",
                    mask: "black-strong",
                    caption: {
                      title: "Second slide"
                    }
                  },
                  {
                    img: true,
                    src: "https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg",
                    mask: "black-slight",
                    caption: {
                      title: "Third slide"
                    }
                  }
                ],
              }
            }
          }
        </script>