Warning: Use of undefined constant MDB_STRIPE_SUB_WEBHOOK_SECRET - assumed 'MDB_STRIPE_SUB_WEBHOOK_SECRET' (this will throw an Error in a future version of PHP) in /var/www/acc01/wp-content/themes/mdbootstrap4/inc/mdb-subscriptions/mdb-payments/stripe/class-mdb-stripe-webhook.php on line 26

Notice: Undefined index: HTTP_REFERER in /var/www/acc01/wp-content/themes/mdbootstrap4/inc/cookie-setter.php on line 8
Angular Mobile Carousel - Bootstrap 4 & Material Design. - Material Design for Bootstrap

Angular Mobile Carousel

Angular Mobile Carousel - Bootstrap 4 & Material Design

Carousels are a great way to get your attention to something. Use full page carousels to force interaction from the user.


Basic example

Swipe left or right to change the carousel current image. The carousel has no looping action. If you reach the last slide, you will not be able to move it forward but backwards.

Android
Android carousel
iOS
iOS carousel

        <StackLayout>
          <mdb-carousel [duration]="400">
            <mdb-carousel-item>
              <Image src="https://wallpaperaccess.com/full/167767.jpg" stretch="fill"></Image>
            </mdb-carousel-item>
            <mdb-carousel-item>
              <Image src="https://i.pinimg.com/originals/1c/86/0f/1c860f088d5179a3780cf51f9e88ab0b.jpg" stretch="fill"
              ></Image>
            </mdb-carousel-item>
            <mdb-carousel-item>
              <Image
                src="https://www.larutadelsorigens.cat/wallpic/full/56-563521_full-hd-vertical-wallpapers-batman-the-dark-knight.jpg"
                stretch="fill"
              ></Image>
            </mdb-carousel-item>
          </mdb-carousel>
        </StackLayout>
      

Angular Mobile Carousel - API

In this section you will find informations about carousel and its required modules and available inputs, outputs, methods and events.


Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular Mobile library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.


    // MDB Angular Mobile Free
    import { MdbCarouselModule } from 'mdb-angular-mobile'

Components

MdbCarousel

Selector: mdb-carousel

Type: MdbCarouselComponent


Inputs

MdbCarouselComponent
Name Type Default Description Example
duration number 400 Allow to modify the slide animation duration. Takes time in ms. duration="1000"