Carousel
A slideshow component for cycling through elements—images or slides of text—like a carousel.
Example
Carousels don’t automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content.
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://img.youtube.com/vi/K5tRSwd-Sc0/maxresdefault.jpg" alt="">
</div>
<div class="carousel-item">
<img src="https://img.youtube.com/vi/BlINFsdTKQ4/maxresdefault.jpg" alt="">
</div>
<div class="carousel-item">
<img src="https://img.youtube.com/vi/OzRs7AMR4e8/maxresdefault.jpg" alt="">
</div>
</div>
</div>Caption
Add captions to your slides easily with the .carousel-caption element within any .carousel-item. They can be easily hidden on smaller viewports, as shown below, with optional display utilities.
Uncharted: The Lost Legacy
Uncharted: The Lost Legacy is the first standalone adventure in Uncharted franchise history.
Monster Hunter World
Journey to System 3 and discover an unimaginable world filled with unusual characters.
God of War
God of War is a shared-world action-RPG, where players can delve into a vast world teeming with amazing technology.
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://img.youtube.com/vi/K5tRSwd-Sc0/maxresdefault.jpg" alt="">
<div class="carousel-overlay"></div>
<div class="carousel-caption">
<div>
<h2 class="carousel-title">Uncharted: The Lost Legacy</h2>
<p>Uncharted: The Lost Legacy is the first standalone adventure in Uncharted franchise history.</p>
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://img.youtube.com/vi/BlINFsdTKQ4/maxresdefault.jpg" alt="">
<div class="carousel-overlay"></div>
<div class="carousel-caption">
<div>
<h2 class="carousel-title">Monster Hunter World</h2>
<p>Journey to System 3 and discover an unimaginable world filled with unusual characters.</p>
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://img.youtube.com/vi/OzRs7AMR4e8/maxresdefault.jpg" alt="">
<div class="carousel-overlay"></div>
<div class="carousel-caption">
<div>
<h2 class="carousel-title">God of War</h2>
<p>God of War is a shared-world action-RPG, where players can delve into a vast world teeming with amazing technology.</p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>Fade Effect
It is possible to replace slide effect between items with fade just add .fade class to the carousel.
Uncharted: The Lost Legacy
Uncharted: The Lost Legacy is the first standalone adventure in Uncharted franchise history.
Monster Hunter World
Journey to System 3 and discover an unimaginable world filled with unusual characters.
God of War
God of War is a shared-world action-RPG, where players can delve into a vast world teeming with amazing technology.
<div id="carousel-fade" class="carousel slide fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-fade" data-slide-to="0" class="active"></li>
<li data-target="#carousel-fade" data-slide-to="1"></li>
<li data-target="#carousel-fade" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://img.youtube.com/vi/K5tRSwd-Sc0/maxresdefault.jpg" alt="">
<div class="carousel-overlay"></div>
<div class="carousel-caption">
<div>
<h2 class="carousel-title">Uncharted: The Lost Legacy</h2>
<p>Uncharted: The Lost Legacy is the first standalone adventure in Uncharted franchise history.</p>
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://img.youtube.com/vi/BlINFsdTKQ4/maxresdefault.jpg" alt="">
<div class="carousel-overlay"></div>
<div class="carousel-caption">
<div>
<h2 class="carousel-title">Monster Hunter World</h2>
<p>Journey to System 3 and discover an unimaginable world filled with unusual characters.</p>
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://img.youtube.com/vi/OzRs7AMR4e8/maxresdefault.jpg" alt="">
<div class="carousel-overlay"></div>
<div class="carousel-caption">
<div>
<h2 class="carousel-title">God of War</h2>
<p>God of War is a shared-world action-RPG, where players can delve into a vast world teeming with amazing technology.</p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel-fade" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-fade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>Ken-Burns Effect
Display carousel items with ken burns effect and add .ken-burns class to the carousel.
Uncharted: The Lost Legacy
Uncharted: The Lost Legacy is the first standalone adventure in Uncharted franchise history.
Monster Hunter World
Journey to System 3 and discover an unimaginable world filled with unusual characters.
God of War
God of War is a shared-world action-RPG, where players can delve into a vast world teeming with amazing technology.
<div id="carousel-ken-burns" class="carousel slide fade ken-burns" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-ken-burns" data-slide-to="0" class="active"></li>
<li data-target="#carousel-ken-burns" data-slide-to="1"></li>
<li data-target="#carousel-ken-burns" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active item-active">
<img src="https://img.youtube.com/vi/K5tRSwd-Sc0/maxresdefault.jpg" alt="">
<div class="carousel-overlay"></div>
<div class="carousel-caption">
<div>
<h2 class="carousel-title">Uncharted: The Lost Legacy</h2>
<p>Uncharted: The Lost Legacy is the first standalone adventure in Uncharted franchise history.</p>
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://img.youtube.com/vi/BlINFsdTKQ4/maxresdefault.jpg" alt="">
<div class="carousel-overlay"></div>
<div class="carousel-caption">
<div>
<h2 class="carousel-title">Monster Hunter World</h2>
<p>Journey to System 3 and discover an unimaginable world filled with unusual characters.</p>
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://img.youtube.com/vi/OzRs7AMR4e8/maxresdefault.jpg" alt="">
<div class="carousel-overlay"></div>
<div class="carousel-caption">
<div>
<h2 class="carousel-title">God of War</h2>
<p>God of War is a shared-world action-RPG, where players can delve into a vast world teeming with amazing technology.</p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel-ken-burns" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-ken-burns" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>Animated Caption
Easy to use animation for captions only need to add .animated class with custom animation and delay.
Uncharted: The Lost Legacy
Uncharted: The Lost Legacy is the first standalone adventure in Uncharted franchise history.
Monster Hunter World
Journey to System 3 and discover an unimaginable world filled with unusual characters.
God of War
God of War is a shared-world action-RPG, where players can delve into a vast world teeming with amazing technology.
<div id="carousel-animated" class="carousel slide carousel-animated" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-animated" data-slide-to="0" class="active"></li>
<li data-target="#carousel-animated" data-slide-to="1"></li>
<li data-target="#carousel-animated" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://img.youtube.com/vi/K5tRSwd-Sc0/maxresdefault.jpg" alt="">
<div class="carousel-overlay"></div>
<div class="carousel-caption">
<div>
<h2 class="carousel-title" data-animation="animated fadeInDown">Uncharted: The Lost Legacy</h2>
<p data-animation="animated animate3 fadeIn">Uncharted: The Lost Legacy is the first standalone adventure in Uncharted franchise history.</p>
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://img.youtube.com/vi/BlINFsdTKQ4/maxresdefault.jpg" alt="">
<div class="carousel-overlay"></div>
<div class="carousel-caption">
<div>
<h2 class="carousel-title" data-animation="animated animate2 bounceInDown">Monster Hunter World</h2>
<p data-animation="animated animate5 fadeInUp fast">Journey to System 3 and discover an unimaginable world filled with unusual characters.</p>
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://img.youtube.com/vi/OzRs7AMR4e8/maxresdefault.jpg" alt="">
<div class="carousel-overlay"></div>
<div class="carousel-caption">
<div>
<h2 class="carousel-title" data-animation="animated animate3 bounceIn">God of War V</h2>
<p data-animation="animated animate3 fadeIn">God of War is a shared-world action-RPG, where players can delve into a vast world teeming with amazing technology.</p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel-animated" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-animated" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>