Basic carousel
.jpg)
.jpg)
.jpg)
<!-- Carousel -->
<div id="carousel1" class="carousel slide carousel-fade hoverable">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="active">
</li>
<li data-target="#carousel1" data-slide-to="1"></li>
<li data-target="#carousel1" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner z-depth-2" role="listbox">
<!-- First slide -->
<div class="item active">
<div class="view overlay hm-blue-slight">
<a><img src="https://mdbootstrap.com/images/slides/slide%20(7).jpg" class="img-responsive" alt="slide1">
<div class="mask waves-effect waves-light"></div>
</a>
<div class="carousel-caption hidden-xs">
<div class="animated fadeInDown">
<h5>Lorem ipsum dolor sit amet</h5>
</div>
</div>
</div>
</div>
<!-- /.item -->
<!-- Second slide -->
<div class="item">
<div class="view overlay hm-blue-slight">
<a><img src="https://mdbootstrap.com/images/slides/slide%20(23).jpg" class="img-responsive" alt="slide2">
<div class="mask waves-effect waves-light"></div>
</a>
<div class="carousel-caption hidden-xs">
<div class="animated fadeInDown">
<h5>Lorem ipsum dolor sit amet</h5>
</div>
</div>
</div>
</div>
<!-- /.item -->
<!-- Third slide -->
<div class="item">
<div class="view overlay hm-blue-slight">
<a><img src="https://mdbootstrap.com/images/slides/slide%20(2).jpg" class="img-responsive" alt="slide3">
<div class="mask waves-effect waves-light"></div>
</a>
<div class="carousel-caption hidden-xs">
<div class="animated fadeInDown">
<h5>Lorem ipsum dolor sit amet</h5>
</div>
</div>
</div>
</div>
<!-- /.item -->
</div>
<!-- /.carousel-inner -->
<!-- Controls -->
<a class="left carousel-control new-control" href="#carousel1" role="button" data-slide="prev">
<span class="fa fa fa-angle-left waves-effect waves-light"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control new-control" href="#carousel1" role="button" data-slide="next">
<span class="fa fa fa-angle-right waves-effect waves-light"></span>
<span class="sr-only">Previous</span>
</a>
</div>
<!-- /.carousel -->
Multi-item carousel
.jpg)
Card title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur excepturi quas sint inventore itaque repudiandae libero atque.
.jpg)
.jpg)
.jpg)
Card title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur excepturi quas sint inventore itaque repudiandae libero atque.
.jpg)
.jpg)
.jpg)
Card title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur excepturi quas sint inventore itaque repudiandae libero atque.
.jpg)
.jpg)
<!-- 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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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 -->
Thumbnails carousel
<!-- Carousel -->
<div id="carousel-thum" class="carousel slide carousel-fade carousel-thumbnails">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#carousel-thum" data-slide-to="0" class="active"><img src="http://brandflow.pl/wp-content/uploads/2015/09/slide3.jpg" class="img-responsive">
</li>
<li data-target="#carousel-thum" data-slide-to="1"><img src="http://brandflow.pl/wp-content/uploads/2015/09/slide2.jpg" class="img-responsive"></li>
<li data-target="#carousel-thum" data-slide-to="2"><img src="http://brandflow.pl/wp-content/uploads/2015/09/slide1.jpg" class="img-responsive"></li>
</ul>
<!-- Wrapper for slides -->
<div class="carousel-inner z-depth-2" role="listbox">
<!-- First slide -->
<div class="item active">
<img src="http://brandflow.pl/wp-content/uploads/2015/09/slide3.jpg" alt="slide1">
<div class="carousel-caption">
<div class="animated fadeInDown">
<h4 class="h4-responsive">This is the caption for slide 1</h4>
</div>
</div>
</div>
<!-- /.item -->
<!-- Second slide -->
<div class="item">
<img src="http://brandflow.pl/wp-content/uploads/2015/09/slide2.jpg" alt="slide2">
<div class="carousel-caption">
<div class="animated fadeInDown">
<h4 class="h4-responsive">This is the caption for slide 2</h4>
</div>
</div>
</div>
<!-- /.item -->
<!-- Third slide -->
<div class="item">
<img src="http://brandflow.pl/wp-content/uploads/2015/09/slide1.jpg" alt="slide3">
<div class="carousel-caption">
<div class="animated fadeInDown">
<h4 class="h4-responsive">This is the caption for slide 3</h4>
</div>
</div>
</div>
<!-- /.item -->
</div>
<!-- /.carousel-inner -->
<!-- Controls -->
<a class="left carousel-control new-control" href="#carousel-thum" role="button" data-slide="prev">
<span class="fa fa fa-angle-left waves-effect waves-light"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control new-control" href="#carousel-thum" role="button" data-slide="next">
<span class="fa fa fa-angle-right waves-effect waves-light"></span>
<span class="sr-only">Previous</span>
</a>
</div>
<!-- /.carousel -->
Gallery Carousel
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<!-- Carousel -->
<div id="car-gall" class="carousel slide carousel-fade carousel-thumbnails carousel-gallery">
<!--Main image-->
<div class="col-xs-8">
<!-- Wrapper for slides -->
<div class="carousel-inner z-depth-1 hoverable" role="listbox">
<!-- First slide -->
<div class="item active">
<img src="https://mdbootstrap.com/wp-content/uploads/2015/11/product-1.jpg" alt="slide1">
</div>
<!-- /.item -->
<!-- Second slide -->
<div class="item">
<img src="https://mdbootstrap.com/wp-content/uploads/2015/11/product-2.jpg" alt="slide2">
</div>
<!-- /.item -->
<!-- Third slide -->
<div class="item">
<img src="https://mdbootstrap.com/wp-content/uploads/2015/11/product-3.jpg" alt="slide3">
</div>
<!-- /.item -->
</div>
<!-- /.carousel-inner -->
</div>
<!--/.Main image-->
<!-- Indicators -->
<div class="col-xs-4">
<ul class="carousel-indicators">
<li data-target="#car-gall" data-slide-to="0" class="active"><img src="https://mdbootstrap.com/wp-content/uploads/2015/11/product-1.jpg" class="img-responsive z-depth-1 hoverable">
</li>
<li data-target="#car-gall" data-slide-to="1"><img src="https://mdbootstrap.com/wp-content/uploads/2015/11/product-2.jpg" class="img-responsive z-depth-1 hoverable"></li>
<li data-target="#car-gall" data-slide-to="2"><img src="https://mdbootstrap.com/wp-content/uploads/2015/11/product-3.jpg" class="img-responsive z-depth-1 hoverable"></li>
</ul>
</div>
<!-- Indicators -->
</div>
<!-- /.carousel -->
</div>
</div>
</div>
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">
Video carousel
<!-- Carousel -->
<div id="carousel-video" class="carousel slide carousel-fade">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-video" data-slide-to="0" class="active">
</li>
<li data-target="#carousel-video" data-slide-to="1"></li>
<li data-target="#carousel-video" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<!-- First slide -->
<div class="item active">
<div class="homepage-hero-module">
<div class="filter"></div>
<video autoplay loop class="fillWidth">
<source src="https://mdbootstrap.com/images/video/Strum-Away.mp4" type="video/mp4" />
</video>
<!-- Alternative image -->
<div class="poster hidden">
<img src="PATH_TO_JPEG" alt="">
</div>
</div>
</div>
<!-- /.item -->
<!-- Second slide -->
<div class="item">
<div class="homepage-hero-module">
<div class="filter"></div>
<video autoplay loop class="fillWidth">
<source src="https://mdbootstrap.com/images/video/Beach-Ball.mp4" type="video/mp4" />
</video>
<!-- Alternative image -->
<div class="poster hidden">
<img src="PATH_TO_JPEG" alt="">
</div>
</div>
</div>
<!-- /.item -->
<!-- Third slide -->
<div class="item">
<div class="homepage-hero-module">
<div class="filter"></div>
<video autoplay loop class="fillWidth">
<source src="https://mdbootstrap.com/images/video/Nature-Sunset.mp4" type="video/mp4" />
</video>
<!-- Alternative image -->
<div class="poster hidden">
<img src="PATH_TO_JPEG" alt="">
</div>
</div>
</div>
<!-- /.item -->
</div>
<!-- /.carousel-inner -->
<!-- Controls -->
<a class="left carousel-control new-control" href="#carousel-video" role="button" data-slide="prev">
<span class="fa fa fa-angle-left waves-effect waves-light"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control new-control" href="#carousel-video" role="button" data-slide="next">
<span class="fa fa fa-angle-right waves-effect waves-light"></span>
<span class="sr-only">Previous</span>
</a>
</div>
<!-- /.carousel -->
Setting the height of the video
#carousel-video {
height: 50vh;
}
#carousel-video .carousel-inner {
height: 100%;
}