Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Carousel

Carousels


Written by Michal Szymanski ,

1. Carousel (slider)

In the #examples-of-use put some dummy text and responsive heading.


<!--First column-->
<div class="col-md-5 wow fadeIn">
    <h2 class="h2-responsive">Why is it so great?</h2>
    <hr>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus modi sint accusantium earum, quisquam dolore odit cumque magnam temporibus blanditiis, nostrum voluptas perferendis, iusto repellendus error corporis ex totam voluptatem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus modi sint accusantium earum, quisquam dolore odit cumque magnam temporibus blanditiis, nostrum voluptas perferendis, iusto repellendus error corporis ex totam voluptatem.</p>
</div>
<!--/First column-->

Go to the CAROUSELS section of MDB documentation and grab the code of Basic Carousel with Caption.

Paste it to the second column of #examples-of-use section:


<!--Second column-->
<div class="col-md-7">
    <!--Carousel Wrapper-->
    <div id="carousel-example-2" class="carousel slide carousel-fade no-flex wow fadeIn" data-wow-delay="0.3s" data-ride="carousel">
        <!--Indicators-->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-2" data-slide-to="1"></li>
            <li data-target="#carousel-example-2" data-slide-to="2"></li>
        </ol>
        <!--/.Indicators-->

        <!--Slides-->
        <div class="carousel-inner" role="listbox">
            <div class="carousel-item active">
                <img class="img-fluid" src="https://mdbootstrap.com/images/regular/city/img%20(3).jpg" alt="First slide">
                <div class="carousel-caption">
                    <h3>Heading</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img class="img-fluid" src="https://mdbootstrap.com/images/regular/city/img%20(7).jpg" alt="Second slide">
                <div class="carousel-caption">
                    <h3>Heading</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img class="img-fluid" src="https://mdbootstrap.com/images/regular/city/img%20(13).jpg" alt="Third slide">
                <div class="carousel-caption">
                    <h3>Heading</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
            </div>
        </div>
        <!--/.Slides-->

        <!--Controls-->
        <a class="left carousel-control" href="#carousel-example-2" role="button" data-slide="prev">
            <span class="icon-prev" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-2" role="button" data-slide="next">
            <span class="icon-next" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
        <!--/.Controls-->
    </div>
    <!--/.Carousel Wrapper-->
</div>
<!--/Second column-->

2. Testimonials

A good Landing Page needs testimonials. For this purpose, we'll use Multi-item Carousel.

From the CAROUSEL section of MDB documentation copy the code of Multi-item Carousel and paste it into the .row of #testimonials section:


<!--Section: Testimonials-->
<section id="testimonials">
    <div class="row">

        <!--Carousel Wrapper-->
        <div id="multi-item-example" class="carousel slide carousel-multi-item" data-ride="carousel">

            <!--Controls-->
            <div class="controls-top">
                <a class="btn-floating btn-small" href="#multi-item-example" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
                <a class="btn-floating btn-small" href="#multi-item-example" data-slide="next"><i class="fa fa-chevron-right"></i></a>
            </div>
            <!--/.Controls-->

            <!--Indicators-->
            <ol class="carousel-indicators">
                <li data-target="#multi-item-example" data-slide-to="0" class="active"></li>
                <li data-target="#multi-item-example" data-slide-to="1"></li>
                <li data-target="#multi-item-example" data-slide-to="2"></li>
            </ol>
            <!--/.Indicators-->

            <!--Slides-->
            <div class="carousel-inner" role="listbox">

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

                    <div class="col-md-4">
                        <div class="card">
                            <img class="img-fluid" src="https://mdbootstrap.com/images/regular/nature/img%20(1).jpg" alt="Card image cap">
                            <div class="card-block">
                                <h4 class="card-title">Card title</h4>
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                <a href="#" class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4 hidden-sm-down">
                        <div class="card">
                            <img class="img-fluid" src="https://mdbootstrap.com/images/regular/nature/img%20(2).jpg" alt="Card image cap">
                            <div class="card-block">
                                <h4 class="card-title">Card title</h4>
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                <a href="#" class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4 hidden-sm-down">
                        <div class="card">
                            <img class="img-fluid" src="https://mdbootstrap.com/images/regular/nature/img%20(3).jpg" alt="Card image cap">
                            <div class="card-block">
                                <h4 class="card-title">Card title</h4>
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                <a href="#" class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>

                </div>
                <!--/.First slide-->

                <!--Second slide-->
                <div class="carousel-item">

                    <div class="col-md-4">
                        <div class="card">
                            <img class="img-fluid" src="https://mdbootstrap.com/images/regular/nature/img%20(4).jpg" alt="Card image cap">
                            <div class="card-block">
                                <h4 class="card-title">Card title</h4>
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                <a href="#" class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4 hidden-sm-down">
                        <div class="card">
                            <img class="img-fluid" src="https://mdbootstrap.com/images/regular/nature/img%20(5).jpg" alt="Card image cap">
                            <div class="card-block">
                                <h4 class="card-title">Card title</h4>
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                <a href="#" class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4 hidden-sm-down">
                        <div class="card">
                            <img class="img-fluid" src="https://mdbootstrap.com/images/regular/nature/img%20(6).jpg" alt="Card image cap">
                            <div class="card-block">
                                <h4 class="card-title">Card title</h4>
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                <a href="#" class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>

                </div>
                <!--/.Second slide-->

                <!--Third slide-->
                <div class="carousel-item">

                    <div class="col-md-4">
                        <div class="card">
                            <img class="img-fluid" src="https://mdbootstrap.com/images/regular/nature/img%20(7).jpg" alt="Card image cap">
                            <div class="card-block">
                                <h4 class="card-title">Card title</h4>
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                <a href="#" class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4 hidden-sm-down">
                        <div class="card">
                            <img class="img-fluid" src="https://mdbootstrap.com/images/regular/nature/img%20(8).jpg" alt="Card image cap">
                            <div class="card-block">
                                <h4 class="card-title">Card title</h4>
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                <a href="#" class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4 hidden-sm-down">
                        <div class="card">
                            <img class="img-fluid" src="https://mdbootstrap.com/images/regular/nature/img%20(9).jpg" alt="Card image cap">
                            <div class="card-block">
                                <h4 class="card-title">Card title</h4>
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                <a href="#" class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>

                </div>
                <!--/.Third slide-->

            </div>
            <!--/.Slides-->

        </div>
        <!--/.Carousel Wrapper-->

    </div>
</section>
<!--/Section: Testimonials-->

Now we have to replace regular Cards inside Multi-item Carousel with a Testimonial Card.

From the CARDS section of MDB documentation grab the code of Testimonial Card and paste it instead of regular Cards which are already inside Multi-item Carousel.

To make it looks better, you can give each Card a different avatar and color.


After all your carousel should looks like that:


<!--Carousel Wrapper-->
<div id="multi-item-example" class="carousel slide carousel-multi-item wow fadeIn" data-ride="carousel">

    <!--Controls-->
    <div class="controls-top">
        <a class="btn-floating btn-small mdb-color" href="#multi-item-example" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
        <a class="btn-floating btn-small mdb-color" href="#multi-item-example" data-slide="next"><i class="fa fa-chevron-right"></i></a>
    </div>
    <!--/.Controls-->

    <!--Indicators-->
    <ol class="carousel-indicators">
        <li data-target="#multi-item-example" data-slide-to="0" class="active"></li>
        <li data-target="#multi-item-example" data-slide-to="1"></li>
        <li data-target="#multi-item-example" data-slide-to="2"></li>
    </ol>
    <!--/.Indicators-->

    <!--Slides-->
    <div class="carousel-inner" role="listbox">

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

            <div class="col-md-4">
                <!--Card-->
                <div class="card testimonial-card">

                    <!--Bacground color-->
                    <div class="card-up green lighten-1">
                    </div>

                    <!--Avatar-->
                    <div class="avatar"><img src="https://mdbootstrap.com/wp-content/uploads/2015/10/avatar-1.jpg" class="img-circle img-responsive">
                    </div>

                    <div class="card-block">
                        <!--Name-->
                        <h4 class="card-title">Anna Doe</h4>
                        <hr>
                        <!--Quotation-->
                        <p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci</p>
                    </div>

                </div>
                <!--/.Card-->
            </div>

            <div class="col-md-4 hidden-sm-down">
                <!--Card-->
                <div class="card testimonial-card">

                    <!--Bacground color-->
                    <div class="card-up green darken-2">
                    </div>

                    <!--Avatar-->
                    <div class="avatar"><img src="https://mdbootstrap.com/wp-content/uploads/2015/10/avatar-2.jpg" class="img-circle img-responsive">
                    </div>

                    <div class="card-block">
                        <!--Name-->
                        <h4 class="card-title">Anna Doe</h4>
                        <hr>
                        <!--Quotation-->
                        <p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci</p>
                    </div>

                </div>
                <!--/.Card-->
            </div>

            <div class="col-md-4 hidden-sm-down">
                <!--Card-->
                <div class="card testimonial-card">

                    <!--Bacground color-->
                    <div class="card-up  green darken-4">
                    </div>

                    <!--Avatar-->
                    <div class="avatar"><img src="https://mdbootstrap.com/wp-content/uploads/2015/10/avatar-3.jpg" class="img-circle img-responsive">
                    </div>

                    <div class="card-block">
                        <!--Name-->
                        <h4 class="card-title">Anna Doe</h4>
                        <hr>
                        <!--Quotation-->
                        <p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci</p>
                    </div>

                </div>
                <!--/.Card-->
            </div>

        </div>
        <!--/.First slide-->

        <!--Second slide-->
        <div class="carousel-item">

            <div class="col-md-4">
                <!--Card-->
                <div class="card testimonial-card">

                    <!--Bacground color-->
                    <div class="card-up blue lighten-1">
                    </div>

                    <!--Avatar-->
                    <div class="avatar"><img src="https://mdbootstrap.com/wp-content/uploads/2015/10/team-avatar-1.jpg" class="img-circle img-responsive">
                    </div>

                    <div class="card-block">
                        <!--Name-->
                        <h4 class="card-title">Anna Doe</h4>
                        <hr>
                        <!--Quotation-->
                        <p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci</p>
                    </div>

                </div>
                <!--/.Card-->
            </div>

            <div class="col-md-4 hidden-sm-down">
                <!--Card-->
                <div class="card testimonial-card">

                    <!--Bacground color-->
                    <div class="card-up blue darken-2">
                    </div>

                    <!--Avatar-->
                    <div class="avatar"><img src="https://mdbootstrap.com/wp-content/uploads/2015/10/team-avatar-2.jpg" class="img-circle img-responsive">
                    </div>

                    <div class="card-block">
                        <!--Name-->
                        <h4 class="card-title">Anna Doe</h4>
                        <hr>
                        <!--Quotation-->
                        <p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci</p>
                    </div>

                </div>
                <!--/.Card-->
            </div>

            <div class="col-md-4 hidden-sm-down">
                <!--Card-->
                <div class="card testimonial-card">

                    <!--Bacground color-->
                    <div class="card-up blue darken-4">
                    </div>

                    <!--Avatar-->
                    <div class="avatar"><img src="https://mdbootstrap.com/wp-content/uploads/2015/10/team-avatar-3.jpg" class="img-circle img-responsive">
                    </div>

                    <div class="card-block">
                        <!--Name-->
                        <h4 class="card-title">Anna Doe</h4>
                        <hr>
                        <!--Quotation-->
                        <p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci</p>
                    </div>

                </div>
                <!--/.Card-->
            </div>

        </div>
        <!--/.Second slide-->

        <!--Third slide-->
        <div class="carousel-item">

            <div class="col-md-4">
                <!--Card-->
                <div class="card testimonial-card">

                    <!--Bacground color-->
                    <div class="card-up indigo lighten-1">
                    </div>

                    <!--Avatar-->
                    <div class="avatar"><img src="https://mdbootstrap.com/wp-content/uploads/2015/10/avatar-3.jpg" class="img-circle img-responsive">
                    </div>

                    <div class="card-block">
                        <!--Name-->
                        <h4 class="card-title">Anna Doe</h4>
                        <hr>
                        <!--Quotation-->
                        <p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci</p>
                    </div>

                </div>
                <!--/.Card-->
            </div>

            <div class="col-md-4 hidden-sm-down">
                <!--Card-->
                <div class="card testimonial-card">

                    <!--Bacground color-->
                    <div class="card-up indigo darken-1">
                    </div>

                    <!--Avatar-->
                    <div class="avatar"><img src="https://mdbootstrap.com/wp-content/uploads/2015/10/team-avatar-1.jpg" class="img-circle img-responsive">
                    </div>

                    <div class="card-block">
                        <!--Name-->
                        <h4 class="card-title">Anna Doe</h4>
                        <hr>
                        <!--Quotation-->
                        <p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci</p>
                    </div>

                </div>
                <!--/.Card-->
            </div>

            <div class="col-md-4 hidden-sm-down">
                <!--Card-->
                <div class="card testimonial-card">

                    <!--Bacground color-->
                    <div class="card-up indigo darken-4">
                    </div>

                    <!--Avatar-->
                    <div class="avatar"><img src="https://mdbootstrap.com/wp-content/uploads/2015/10/team-avatar-2.jpg" class="img-circle img-responsive">
                    </div>

                    <div class="card-block">
                        <!--Name-->
                        <h4 class="card-title">Anna Doe</h4>
                        <hr>
                        <!--Quotation-->
                        <p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci</p>
                    </div>

                </div>
                <!--/.Card-->
            </div>

        </div>
        <!--/.Third slide-->

    </div>
    <!--/.Slides-->

</div>
<!--/.Carousel Wrapper-->

If something doesn’t work as expected, you can download a final code for this lesson here:

Download Live preview Next lesson

Do you want to share?


About author


User avatar

Michal Szymanski

UI/UX designer, entrepreneur, web developer, marketing analyst. In love with javascript, material design, big data and marketing automation.

Comments 8

Leave a reply

Card image cap

Create advanced websites and apps


With MDB Pro you can create easily and fast the most advanced projects.

2000+ stunning premium components, 50+ sections, 20+ templates, 30 plugins, direct contact with our team to help you with any questions and unlimited future updates.