web
mobile
Edit these docs Rate these docs

React Mobile Carousel

React Mobile Carousel - Bootstrap 4 & Material Design

A slideshow component for cycling through elements—images or slides of text—like a carousel.


How it works

The carousel is a slideshow for cycling through a series of content. It works with a series of images, text, or custom markup. It also includes support for previous/next swipe events.


Basic example

Carousels don’t automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content.

With auto

Android
iOS

        <script>

          import React, { Component } from "react";
          import { ScrollView } from "react-native";
          import { MDBCarousel } from "mdbreact-mobile";


          export default class CarouselPage extends Component {

            render() {
              const img = [
                "https://mdbootstrap.com/img/Photos/Slides/img%20(35).jpg",
                "https://mdbootstrap.com/img/Photos/Slides/img%20(36).jpg",
                "https://mdbootstrap.com/img/Photos/Slides/img%20(37).jpg"
              ];

              return (
                <ScrollView>
                    <Carousel images={img} auto />
                </ScrollView>
              );
            }
          }
        </script>
      

Full background

You can easly have a background with full of height and width of your device.

Android
iOS

        <script>

          import React, { Component } from "react";
          import { ScrollView } from "react-native";
          import { MDBCarousel } from "mdbreact-mobile";


          export default class CarouselPage extends Component {

            render() {
              const img = [
                "https://mdbootstrap.com/img/Photos/Slides/img%20(35).jpg",
                "https://mdbootstrap.com/img/Photos/Slides/img%20(36).jpg",
                "https://mdbootstrap.com/img/Photos/Slides/img%20(37).jpg"
              ];

              return (
                <ScrollView>
                    <Carousel images={img} auto fullBackground />
                </ScrollView>
              );
            }
          }
        </script>
      
Edit these docs Rate these docs

Carousel - API

In this section you will find advanced information about the Carousel component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use in working with it.


Import statement


            import { MDBCarousel } from 'mdbreact-mobile'
      

API Reference: Properties

Name Type Default Description Example
auto boolean true Set auto to carousel swipe to images <MDBCarousel auto />
color images array Array of images. <MDBCarousel images={['https://your-url', 'https://your-url']} />
interval number 3000ms Interval to images. <MDBCarousel interval={4000} />