Bootstrap carousel
MDB gives you a possibility to present your images, videos, and text messages in much more eye-pleasant form by providing you with few stunning carousels.
Each carousel is fully responsive and works perfectly on any device or browser.
In browsers where the Page Visibility API is supported, the carousel will avoid sliding when the web page is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.). Nested carousels are not supported.
Basic example
.jpg)
.jpg)
.jpg)
<!--Carousel Wrapper-->
<div class="fixed-sn">
<div class="col-lg-10 ml-auto mr-auto">
<!--Slides-->
<carousel class="carousel-fade">
<!--First slide-->
<slide>
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(18).jpg" alt="First slide">
</slide>
<!--/First slide-->
<!--Second slide-->
<slide>
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(19).jpg" alt="Second slide">
</slide>
<!--/Second slide-->
<!--Third slide-->
<slide>
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(20).jpg" alt="Third slide">
</slide>
<!--/Third slide-->
</carousel>
<!--/.Slides-->
</div>
</div>
<!--/.Carousel Wrapper-->
Optional captions
Add captions to your slides easily with the .carousel-caption element within any .carousel-item. Place just about any optional HTML within there and it will be automatically aligned and formatted.
If your content is not visible enough, you can cover the image with a darker mask.
You can easily change the intensity and color of the mask. To learn more read our MASKS documentation.
.jpg)
.jpg)
.jpg)
<!--Carousel Wrapper-->
<div class="fixed-sn">
<div class="col-lg-10 ml-auto mr-auto">
<!--Slides-->
<carousel class="carousel-fade">
<!--First slide-->
<slide>
<div class="view hm-black-light">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(22).jpg" alt="First slide">
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">Light mask</h3>
<p>First text</p>
</div>
</slide>
<!--/First slide-->
<!--Second slide-->
<slide>
<div class="view hm-black-light">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(23).jpg" alt="Second slide">
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">Strong mask</h3>
<p>Secondary text</p>
</div>
</slide>
<!--/Second slide-->
<!--Third slide-->
<slide>
<div class="view hm-black-light">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(24).jpg" alt="Third slide">
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">Slight mask</h3>
<p>Third text</p>
</div>
</slide>
<!--/Third slide-->
</carousel>
<!--/.Slides-->
</div>
</div>
<!--/.Carousel Wrapper-->
Multi-item carousel Premium component
.jpg)
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Button.jpg)
.jpg)
.jpg)
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Button.jpg)
.jpg)
.jpg)
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Button.jpg)
.jpg)
<!--Carousel Wrapper-->
<div class="fixed-sn">
<div class="col-lg-10 ml-auto mr-auto">
<!--Slides-->
<carousel class="carousel-multi-item multi-animation" [type]="'carousel-multi-item'">
<!--First slide-->
<slide>
<div class="col-md-4">
<div class="card">
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(51).jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p>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" ripple-radius>Button</a>
</div>
</div>
</div>
<div class="col-md-4 hidden-sm-down">
<div class="card">
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(23).jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p>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" ripple-radius>Button</a>
</div>
</div>
</div>
<div class="col-md-4 hidden-sm-down">
<div class="card">
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(66).jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p>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" ripple-radius>Button</a>
</div>
</div>
</div>
</slide>
<!--/First slide-->
<!--Second slide-->
<slide>
<div class="col-md-4">
<div class="card">
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(108).jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p>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" ripple-radius>Button</a>
</div>
</div>
</div>
<div class="col-md-4 hidden-sm-down">
<div class="card">
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(5).jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p>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" ripple-radius>Button</a>
</div>
</div>
</div>
<div class="col-md-4 hidden-sm-down">
<div class="card">
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(79).jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p>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" ripple-radius>Button</a>
</div>
</div>
</div>
</slide>
<!--/Second slide-->
<!--Third slide-->
<slide>
<div class="col-md-4">
<div class="card">
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(65).jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p>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" ripple-radius>Button</a>
</div>
</div>
</div>
<div class="col-md-4 hidden-sm-down">
<div class="card">
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(36).jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p>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" ripple-radius>Button</a>
</div>
</div>
</div>
<div class="col-md-4 hidden-sm-down">
<div class="card">
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(52).jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p>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" ripple-radius>Button</a>
</div>
</div>
</div>
</slide>
<!--/Third slide-->
</carousel>
<!--/.Slides-->
</div>
</div>
<!--/.Carousel Wrapper-->
Thumbnails carousel Premium component
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
<!--Carousel Wrapper-->
<div class="fixed-sn">
<div class="col-lg-10 ml-auto mr-auto">
<!--Slides-->
<carousel class="carousel slide carousel-fade" [type]="'carousel-thumbnails'">
<!--First slide-->
<slide>
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(25).jpg" alt="First slide">
</slide>
<!--/First slide-->
<!--Second slide-->
<slide>
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(73).jpg" alt="Second slide">
</slide>
<!--/Second slide-->
<!--Third slide-->
<slide>
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(27).jpg" alt="Third slide">
</slide>
<!--/Third slide-->
</carousel>
<!--/.Slides-->
</div>
</div>
<!--/.Carousel Wrapper-->
Video Carousel
<!--Carousel Wrapper-->
<div class="fixed-sn">
<div class="col-lg-10 ml-auto mr-auto">
<!--Slides-->
<carousel class="carousel slide carousel-fade">
<!--First slide-->
<slide>
<video class="video-fluid" autoplay loop>
<source src="https://mdbootstrap.com/images/video/Strum-Away.mp4" type="video/mp4" />
</video>
</slide>
<!--/First slide-->
<!--Second slide-->
<slide>
<video class="video-fluid" autoplay loop>
<source src="https://mdbootstrap.com/images/video/Beach-Ball.mp4" type="video/mp4" />
</video>
</slide>
<!--/Second slide-->
<!--Third slide-->
<slide>
<video class="video-fluid" autoplay loop>
<source src="https://mdbootstrap.com/images/video/Nature-Sunset.mp4" type="video/mp4" />
</video>
</slide>
<!--/Third slide-->
</carousel>
<!--/.Slides-->
</div>
</div>
<!--/.Carousel Wrapper-->
Caption and mask
If you want to add a caption to your carousel you will probably also need to cover it with a dark mask, to make your caption more visible.
You can easily change the intensity and color of the mask. To learn more read our MASKS documentation.
<!--Carousel Wrapper-->
<div class="fixed-sn">
<div class="col-lg-10 ml-auto mr-auto">
<!--Slides-->
<carousel class="carousel slide carousel-fade">
<!--First slide-->
<slide>
<div class="view hm-black-light">
<video class="video-fluid" autoplay loop>
<source src="https://mdbootstrap.com/img/video/Strum-Away.mp4" type="video/mp4" />
</video>
<div class="full-bg-img"></div>
</div>
<div class="carousel-caption">
<div class="animated fadeInDown">
<h3 class="h3-responsive">Light mask</h3>
<p>First text</p>
</div>
</div>
</slide>
<!--/First slide-->
<!--Second slide-->
<slide>
<div class="view hm-black-light">
<video class="video-fluid" autoplay loop>
<source src="https://mdbootstrap.com/img/video/Beach-Ball.mp4" type="video/mp4" />
</video>
<div class="full-bg-img"></div>
</div>
<div class="carousel-caption">
<div class="animated fadeInDown">
<h3 class="h3-responsive">Super light mask</h3>
<p>Secondary text</p>
</div>
</div>
</slide>
<!--/Second slide-->
<!--Third slide-->
<slide>
<div class="view hm-black-light">
<video class="video-fluid" autoplay loop>
<source src="https://mdbootstrap.com/img/video/Nature-Sunset.mp4" type="video/mp4" />
</video>
<div class="full-bg-img"></div>
</div>
<div class="carousel-caption">
<div class="animated fadeInDown">
<h3 class="h3-responsive">Strong mask</h3>
<p>Third text</p>
</div>
</div>
</slide>
<!--/Third slide-->
</carousel>
<!--/.Slides-->
</div>
</div>
<!--/.Carousel Wrapper-->
Full page carousels
Click the buttons below to see a live preview.
Full Image Carousel Full Video CarouselFull Image Carousel
<!--Carousel Wrapper-->
<carousel class="carousel slide carousel-fade img-full" [interval]="0">
<!--First slide-->
<slide>
<!--Mask-->
<div class="view hm-black-light">
<div class="full-bg-img flex-center">
<ul class="animated fadeInUp col-md-12">
<li>
<h1 class="h1-responsive flex-item">Material Design for Bootstrap 4</h1>
</li>
<li>
<p class="flex-item">The most powerful and free UI KIT for Bootstrap</p>
</li>
<li>
<a ripple-radius target="_blank" href="https://mdbootstrap.com/getting-started/" class="btn btn-primary btn-lg flex-item">Sign up!</a>
</li>
<li>
<a ripple-radius target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-default btn-lg flex-item">Learn more</a>
</li>
</ul>
</div>
</div>
<!--/.Mask-->
</slide>
<!--/.First slide-->
<!--Second slide -->
<slide>
<!--Mask-->
<div class="view hm-black-light">
<div class="full-bg-img flex-center">
<ul class="animated fadeInUp col-md-12">
<li>
<h1 class="h1-responsive">Lots of tutorials at your disposal</h1>
</li>
<li>
<p>And all of them are FREE!</p>
</li>
<li>
<a ripple-radius target="_blank" href="https://mdbootstrap.com/bootstrap-tutorial/" class="btn btn-primary btn-lg">Start learning</a>
</li>
</ul>
</div>
</div>
<!--/.Mask-->
</slide>
<!--/.Second slide -->
<!--Third slide-->
<slide>
<!--Mask-->
<div class="view hm-black-light">
<div class="full-bg-img flex-center">
<ul class="animated fadeInUp col-md-12">
<li>
<h1 class="h1-responsive">Visit our support forum</h1></li>
<li>
<p>Our community can help you with any question</p>
<li>
<li>
<a ripple-radius target="_blank" href="https://mdbootstrap.com/forums/forum/support/" class="btn btn-default btn-lg">Support forum</a>
</li>
</ul>
</div>
</div>
<!--/.Mask-->
</slide>
<!--/.Third slide-->
</carousel>
<!--/.Carousel Wrapper-->
<!--Footer-->
<footer class="page-footer center-on-small-only carouselFooter">
<!--Footer Links-->
<div class="container-fluid">
<div class="row">
<!--First column-->
<div class="col-md-3 offset-md-1">
<h5 class="title">ABOUT MATERIAL DESIGN</h5>
<p>Material Design (codenamed Quantum Paper) is a design language developed by Google.</p>
<p>Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap.</p>
</div>
<!--/.First column-->
<hr class="hidden-md-up">
<!--Second column-->
<div class="col-md-2 offset-md-1">
<h5 class="title">First column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Second column-->
<hr class="hidden-md-up">
<!--Third column-->
<div class="col-md-2">
<h5 class="title">Second column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Third column-->
<hr class="hidden-md-up">
<!--Fourth column-->
<div class="col-md-2">
<h5 class="title">Third column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Fourth column-->
</div>
</div>
<!--/.Footer Links-->
<hr>
<!--Call to action-->
<div class="call-to-action">
<h4>Material Design for Bootstrap</h4>
<ul>
<li>
<h5>Get our UI KIT for free</h5></li>
<li><a target="_blank" href="https://mdbootstrap.com/getting-started/" class="btn btn-danger">Sign up!</a></li>
<li><a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-default">Learn more</a><li>
</ul>
</div>
<!--/.Call to action-->
<!--Copyright-->
<div class="footer-copyright">
<div class="container-fluid">
© 2015 Copyright: <a href="https://mdbootstrap.com"> MDBootstrap.com </a>
</div>
</div>
<!--/.Copyright-->
</footer>
<!--/.Footer-->
Data structure:
@Component({
styles: [`
/* Carousel*/
footer.page-footer {
margin-top: 0;
}
.carousel,
.carousel-item,
.active {
height: 100vh;
}
.view {
width: 100%;
height: 100%;
}
.carousel-inner {
height: 100vh;
}
.carousel-item:nth-child(1) {
background-image: url("https://mdbootstrap.com/images/regular/nature/img%20(54).jpg");
background-repeat: no-repeat;
background-size: cover;
}
.carousel-item:nth-child(2) {
background-image: url("https://mdbootstrap.com/images/regular/nature/img%20(4).jpg");
background-repeat: no-repeat;
background-size: cover;
}
.carousel-item:nth-child(3) {
background-image: url("https://mdbootstrap.com/images/regular/nature/img%20(3).jpg");
background-repeat: no-repeat;
background-size: cover;
}
/*Caption*/
.flex-center {
color: #fff;
}
@media (min-width: 776px) {
.carousel .view ul li {
display: inline;
}
.carousel .view .full-bg-img ul li .flex-item {
margin-bottom: 1.5rem;
}
}
`]
})
Full Video Carousel
<!--Carousel Wrapper-->
<carousel class="carousel slide carousel-fade" [interval]="0">
<slide>
<!--Mask color-->
<div class="view hm-black-light">
<!--Video source-->
<video class="video-fluid" autoplay loop>
<source src="https://mdbootstrap.com/images/video/Strum-Away.mp4" type="video/mp4" />
</video>
<div class="full-bg-img"></div>
</div>
<!--Caption-->
<div class="carousel-caption">
<div class="flex-center animated fadeInDown">
<ul>
<li>
<h1 class="h1-responsive">Material Design for Bootstrap 4</h1></li>
<li>
<p>The most powerful and free UI KIT for Bootstrap</p>
</li>
<li>
<a ripple-radius target="_blank" href="#" class="btn btn-primary btn-lg">Sign up!</a>
<a ripple-radius target="_blank" href="#" class="btn btn-default btn-lg">Learn more</a>
</li>
</ul>
</div>
</div>
<!--Caption-->
</slide>
<slide>
<!--Mask color-->
<div class="view hm-black-slight">
<!--Video source-->
<video class="video-fluid" autoplay loop>
<source src="https://mdbootstrap.com/images/video/Beach-Ball.mp4" type="video/mp4" />
</video>
<div class="mask"></div>
</div>
<!--Caption-->
<div class="carousel-caption">
<div class="flex-center animated fadeInDown">
<ul>
<li>
<h1 class="h1-responsive">Lots of tutorials at your disposal</h1>
</li>
<li>
<p>And all of them are FREE!</p>
</li>
<li>
<a ripple-radius target="_blank" href="#" class="btn btn-primary btn-lg">Start learning</a>
</li>
</ul>
</div>
</div>
<!--/.Caption-->
</slide>
<slide>
<!--Mask color-->
<div class="view hm-black-strong">
<!--Video source-->
<video class="video-fluid" autoplay loop>
<source src="https://mdbootstrap.com/images/video/Nature-Sunset.mp4" type="video/mp4" />
</video>
<div class="mask"></div>
</div>
<!--Caption-->
<div class="carousel-caption">
<div class="flex-center animated fadeInDown">
<ul>
<li>
<h1 class="h1-responsive">Visit our support forum</h1></li>
<li>
<p>Our community can help you with any question</p>
</li>
<li>
<a ripple-radius target="_blank" href="#" class="btn btn-default btn-lg">Support forum</a>
</li>
</ul>
</div>
</div>
<!--/.Caption-->
</slide>
</carousel>
<!--/.Carousel Wrapper-->
<footer class="page-footer center-on-small-only carouselFooter">
<!--Footer Links-->
<div class="container-fluid">
<div class="row">
<!--First column-->
<div class="col-md-3 offset-md-1">
<h5 class="title">ABOUT MATERIAL DESIGN</h5>
<p>Material Design (codenamed Quantum Paper) is a design language developed by Google. </p>
<p>Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap.</p>
</div>
<!--/.First column-->
<hr class="hidden-md-up">
<!--Second column-->
<div class="col-md-2 offset-md-1">
<h5 class="title">First column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Second column-->
<hr class="hidden-md-up">
<!--Third column-->
<div class="col-md-2">
<h5 class="title">Second column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Third column-->
<hr class="hidden-md-up">
<!--Fourth column-->
<div class="col-md-2">
<h5 class="title">Third column</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Fourth column-->
</div>
</div>
<!--/.Footer Links-->
<hr>
<!--Call to action-->
<div class="call-to-action">
<h4>Material Design for Bootstrap</h4>
<ul>
<li>
<h5>Get our UI KIT for free</h5></li>
<li><a ripple-radius target="_blank" href="#" class="btn btn-danger">Sign up!</a></li>
<li><a ripple-radius target="_blank" href="#" class="btn btn-default">Learn more</a></li>
</ul>
</div>
<!--/.Call to action-->
<!--Copyright-->
<div class="footer-copyright">
<div class="container-fluid">
© 2015 Copyright: <a href="#"> MDBootstrap.com </a>
</div>
</div>
<!--/.Copyright-->
</footer>
<!--/.Footer-->
Data structure:
@Component ({
styles: [`
/* Carousel*/
footer.page-footer {
margin-top: 0;
}
.carousel,
.carousel-item,
.active {
height: 100vh;
}
.view {
width: 100%;
height: 100%;
}
.carousel-inner {
height: 100vh;
}
/*Caption*/
.flex-center {
color: #fff;
}
@media (min-width: 776px) {
.carousel .view ul li {
display: inline;
}
.carousel .view .full-bg-img ul li .flex-item {
margin-bottom: 1.5rem;
}
}
`]
})
API Reference
CarouselComponent
| Selector | carousel |
Inputs
[(activeSlide)]="activeSlideIndex" |
Type: number Index of currently displayed slide(started for 0) |
[interval]="500" or [interval]="myInterval" |
Type: number Delay of item cycling in milliseconds. If false, carousel won't cycle automatically |
[noPause]="false" |
Type: boolean If true — will disable pausing on carousel mouse hover |
[noWrap]="true" or [noWrap]="noWrapSlides" |
Type: boolean If true — carousel will not cycle continuously and will have hard stops (prevent looping) |
Outputs
(activeSlideChange)="activeSlideChange()" |
Will be emitted when active slide has been changed. Part of two-way-bindable [(activeSlide)] property |
Example:
<div class="fixed-sn">
<div class="col-lg-10 ml-auto mr-auto">
<carousel [interval]="myInterval" [noWrap]="noWrapSlides" [(activeSlide)]="activeSlideIndex" (activeSlideChange)="activeSlideChange()">
<slide *ngFor="let slide of slides; let index=index">
<img [src]="slide.image">
<div class="carousel-caption">
<h4>Slide {{index}}</h4>
<p>{{slide.text}}</p>
</div>
</slide>
</carousel>
</div>
</div>
Data structure:
export class AppComponent {
public myInterval: number = 3000;
public activeSlideIndex: number = 0;
public noWrapSlides:boolean = false;
activeSlideChange(){
console.log(this.activeSlideIndex);
}
public slides:Array<Object> = [
{"image":"https://mdbootstrap.com/img/Photos/Slides/img%20(18).jpg"},
{"image":"https://mdbootstrap.com/img/Photos/Slides/img%20(19).jpg"},
{"image":"https://mdbootstrap.com/img/Photos/Slides/img%20(20).jpg"},
];
}