Multi-item carousel


<!-- Carousel -->
    <div id="carousel-multi-item" class="carousel slide multiitem-car">
        <div class="text-center">
            <a class="btn-floating btn-small waves-effect waves-light grey darken-4" href="#carousel-multi-item" role="button" data-slide="prev"><i class="material-icons">keyboard_arrow_left</i></a>
            <a class="btn-floating btn-small waves-effect waves-light grey darken-4" href="#carousel-multi-item" role="button" data-slide="next"><i class="material-icons">keyboard_arrow_right</i></a>
        </div>
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-multi-item" data-slide-to="0" class="active">
            </li>
            <li data-target="#carousel-multi-item" data-slide-to="1"></li>
            <li data-target="#carousel-multi-item" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner">


            <!-- First slide -->
            <div class="item active">

                <!-- Row -->
                <div class="row text-center">
                    <!-- Card -->
                    <div class="col-sm-4 item-card">
                        <!--Image Card-->
                        <div class="card hoverable">
                            <div class="card-image">
                                <div class="view overlay hm-white-slight z-depth-1">
                                    <img src="http://mdbootstrap.com/images/reg/reg%20(2).jpg" class="img-responsive" alt="">
                                    <a href="#">
                                        <div class="mask waves-effect"></div>
                                    </a>
                                </div>
                            </div>
                            <div class="card-content">
                                <h5>Card title</h5>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur excepturi quas sint inventore itaque repudiandae libero atque. </p>
                            </div>
                            <!--Buttons-->
                            <div class="card-btn text-center">
                                <a href="#" class="btn btn-primary btn-md waves-effect waves-light">Read more</a>
                            </div>
                            <!--/.Buttons-->
                        </div>
                        <!--Image Card-->
                    </div>
                    <!-- /.Card -->

                    <!-- Card -->
                    <div class="col-sm-4 item-card  hidden-xs">
                        <!--Image Card-->
                        <div class="card hoverable">
                            <div class="card-image">
                                <div class="view overlay hm-white-slight z-depth-1">
                                    <img src="http://mdbootstrap.com/images/reg/reg%20(22).jpg" class="img-responsive" alt="">
                                    <a href="#">
                                        <div class="mask waves-effect"></div>
                                    </a>
                                </div>
                            </div>
                            <div class="card-content">
                                <h5>Card title</h5>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur excepturi quas sint inventore itaque repudiandae libero atque. </p>
                            </div>
                            <!--Buttons-->
                            <div class="card-btn text-center">
                                <a href="#" class="btn btn-primary btn-md waves-effect waves-light">Read more</a>
                            </div>
                            <!--/.Buttons-->
                        </div>
                        <!--Image Card-->
                    </div>
                    <!-- /.Card -->

                    <!-- Card -->
                    <div class="col-sm-4 item-card  hidden-xs">
                        <!--Image Card-->
                        <div class="card hoverable">
                            <div class="card-image">
                                <div class="view overlay hm-white-slight z-depth-1">
                                    <img src="http://mdbootstrap.com/images/reg/reg%20(23).jpg" class="img-responsive" alt="">
                                    <a href="#">
                                        <div class="mask waves-effect"></div>
                                    </a>
                                </div>
                            </div>
                            <div class="card-content">
                                <h5>Card title</h5>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur excepturi quas sint inventore itaque repudiandae libero atque. </p>
                            </div>
                            <!--Buttons-->
                            <div class="card-btn text-center">
                                <a href="#" class="btn btn-primary btn-md waves-effect waves-light">Read more</a>
                            </div>
                            <!--/.Buttons-->
                        </div>
                        <!--Image Card-->
                    </div>
                    <!-- /.Card -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.item -->

            <!-- Second slide -->
            <div class="item">
                <!-- Row -->
                <div class="row text-center">
                    <!-- Card -->
                    <div class="col-sm-4 item-card">
                        <!--Image Card-->
                        <div class="card hoverable">
                            <div class="card-image">
                                <div class="view overlay hm-white-slight z-depth-1">
                                    <img src="http://mdbootstrap.com/images/reg/reg%20(24).jpg" class="img-responsive" alt="">
                                    <a href="#">
                                        <div class="mask waves-effect"></div>
                                    </a>
                                </div>
                            </div>
                            <div class="card-content">
                                <h5>Card title</h5>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur excepturi quas sint inventore itaque repudiandae libero atque. </p>
                            </div>
                            <!--Buttons-->
                            <div class="card-btn text-center">
                                <a href="#" class="btn btn-primary btn-md waves-effect waves-light">Read more</a>
                            </div>
                            <!--/.Buttons-->
                        </div>
                        <!--Image Card-->
                    </div>
                    <!-- /.Card -->

                    <!-- Card -->
                    <div class="col-sm-4 item-card hidden-xs">
                        <!--Image Card-->
                        <div class="card hoverable">
                            <div class="card-image">
                                <div class="view overlay hm-white-slight z-depth-1">
                                    <img src="http://mdbootstrap.com/images/reg/reg%20(25).jpg" class="img-responsive" alt="">
                                    <a href="#">
                                        <div class="mask waves-effect"></div>
                                    </a>
                                </div>
                            </div>
                            <div class="card-content">
                                <h5>Card title</h5>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur excepturi quas sint inventore itaque repudiandae libero atque. </p>
                            </div>
                            <!--Buttons-->
                            <div class="card-btn text-center">
                                <a href="#" class="btn btn-primary btn-md waves-effect waves-light">Read more</a>
                            </div>
                            <!--/.Buttons-->
                        </div>
                        <!--Image Card-->
                    </div>
                    <!-- /.Card -->

                    <!-- Card -->
                    <div class="col-sm-4 item-card hidden-xs">
                        <!--Image Card-->
                        <div class="card hoverable">
                            <div class="card-image">
                                <div class="view overlay hm-white-slight z-depth-1">
                                    <img src="http://mdbootstrap.com/images/reg/reg%20(26).jpg" class="img-responsive" alt="">
                                    <a href="#">
                                        <div class="mask waves-effect"></div>
                                    </a>
                                </div>
                            </div>
                            <div class="card-content">
                                <h5>Card title</h5>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur excepturi quas sint inventore itaque repudiandae libero atque. </p>
                            </div>
                            <!--Buttons-->
                            <div class="card-btn text-center">
                                <a href="#" class="btn btn-primary btn-md waves-effect waves-light">Read more</a>
                            </div>
                            <!--/.Buttons-->
                        </div>
                        <!--Image Card-->
                    </div>
                    <!-- /.Card -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.item -->

            <!-- Third slide -->
            <div class="item">
                <!-- Row -->
                <div class="row text-center">
                    <!-- Card -->
                    <div class="col-sm-4 item-card">
                        <!--Image Card-->
                        <div class="card hoverable">
                            <div class="card-image">
                                <div class="view overlay hm-white-slight z-depth-1">
                                    <img src="http://mdbootstrap.com/images/reg/reg%20(27).jpg" class="img-responsive" alt="">
                                    <a href="#">
                                        <div class="mask waves-effect"></div>
                                    </a>
                                </div>
                            </div>
                            <div class="card-content">
                                <h5>Card title</h5>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur excepturi quas sint inventore itaque repudiandae libero atque. </p>
                            </div>
                            <!--Buttons-->
                            <div class="card-btn text-center">
                                <a href="#" class="btn btn-primary btn-md waves-effect waves-light">Read more</a>
                            </div>
                            <!--/.Buttons-->
                        </div>
                        <!--Image Card-->
                    </div>
                    <!-- /.Card -->

                    <!-- Card -->
                    <div class="col-sm-4 item-card hidden-xs">
                        <!--Image Card-->
                        <div class="card hoverable">
                            <div class="card-image">
                                <div class="view overlay hm-white-slight z-depth-1">
                                    <img src="http://mdbootstrap.com/images/reg/reg%20(28).jpg" class="img-responsive" alt="">
                                    <a href="#">
                                        <div class="mask waves-effect"></div>
                                    </a>
                                </div>
                            </div>
                            <div class="card-content">
                                <h5>Card title</h5>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur excepturi quas sint inventore itaque repudiandae libero atque. </p>
                            </div>
                            <!--Buttons-->
                            <div class="card-btn text-center">
                                <a href="#" class="btn btn-primary btn-md waves-effect waves-light">Read more</a>
                            </div>
                            <!--/.Buttons-->
                        </div>
                        <!--Image Card-->
                    </div>
                    <!-- /.Card -->

                    <!-- Card -->
                    <div class="col-sm-4 item-card hidden-xs">
                        <!--Image Card-->
                        <div class="card hoverable">
                            <div class="card-image">
                                <div class="view overlay hm-white-slight z-depth-1">
                                    <img src="http://mdbootstrap.com/images/reg/reg%20(29).jpg" class="img-responsive" alt="">
                                    <a href="#">
                                        <div class="mask waves-effect"></div>
                                    </a>
                                </div>
                            </div>
                            <div class="card-content">
                                <h5>Card title</h5>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur excepturi quas sint inventore itaque repudiandae libero atque. </p>
                            </div>
                            <!--Buttons-->
                            <div class="card-btn text-center">
                                <a href="#" class="btn btn-primary btn-md waves-effect waves-light">Read more</a>
                            </div>
                            <!--/.Buttons-->
                        </div>
                        <!--Image Card-->
                    </div>
                    <!-- /.Card -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.item -->

        </div>
        <!-- /.carousel-inner -->

    </div>
    <!-- /.carousel -->
        

Fade or Slide effect

Add class .carousel-fade if you want to use Fade Effect. Remove it if you prefer Slide Effect


     <div id="carousel-example" class="carousel slide carousel-fade">
     

Carousel autoplay

Add the following code to your project


    <script>
        $('.carousel').carousel();
    </script>
       

Preventing carousel autoplay

Add data-interval="false" to your carousel

Example:


     <div id="carousel1" class="carousel slide hoverable" data-interval="false">