Carousel
These modular elements can be readily used and customized in every layout across pages.
Owl Carousel
Documentation and examples for opt-in styling of image slider with Owl Caorusel. View Owl Carousel Documentation
<div class="owl-carousel owl-carousel-theme owl-theme owl-dots-inner" data-options='{"margin":30,"nav":true,"autoplay":true,"loop":true,"dots":false,"items":1}'>
<img class="rounded" src="../assets/img/gallery/g1.jpg" alt="">
<img class="rounded" src="../assets/img/gallery/g2.jpg" alt="">
<img class="rounded" src="../assets/img/gallery/g3.jpg" alt="">
</div>Stylesheet
<link href="assets/lib/owl.carousel/owl.carousel.css" rel="stylesheet">Javascript
<script src="assets/lib/owl.carousel/owl.carousel.js"></script>Bootstrap Carousel
A slideshow component for cycling through elements—images or slides of text—like a carousel. View Carousel on Bootstrap
Basic Example
<div class="carousel slide" id="carouselExampleControls" data-ride="carousel">
<ol class="carousel-indicators">
<li class="active" data-target="#carouselExampleControls" data-slide-to="0"></li>
<li data-target="#carouselExampleControls" data-slide-to="1"></li>
<li data-target="#carouselExampleControls" data-slide-to="2"></li>
</ol>
<div class="carousel-inner rounded">
<div class="carousel-item active"><img class="d-block w-100" src="../assets/img/gallery/g4.jpg" alt="First slide"></div>
<div class="carousel-item"><img class="d-block w-100" src="../assets/img/gallery/g5.jpg" alt="Second slide"></div>
<div class="carousel-item"><img class="d-block w-100" src="../assets/img/gallery/g6.jpg" alt="Third slide"></div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>With Captions
<div class="carousel slide" id="carouselExampleCaptions" data-ride="carousel">
<ol class="carousel-indicators">
<li class="active" data-target="#carouselExampleCaptions" data-slide-to="0"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner rounded">
<div class="carousel-item active"><img class="d-block w-100" src="../assets/img/gallery/g7.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5 class="text-white">First Slide Heading</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="carousel-item"><img class="d-block w-100" src="../assets/img/gallery/g8.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5 class="text-white">First Slide Heading</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="carousel-item"><img class="d-block w-100" src="../assets/img/gallery/g9.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5 class="text-white">First Slide Heading</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>Fade Example
<div class="carousel slide carousel-fade" id="carouselExampleFade" data-ride="carousel">
<div class="carousel-inner rounded">
<div class="carousel-item active"><img class="d-block w-100" src="../assets/img/gallery/g1.jpg" alt="First slide"></div>
<div class="carousel-item"><img class="d-block w-100" src="../assets/img/gallery/g4.jpg" alt="Second slide"></div>
<div class="carousel-item"><img class="d-block w-100" src="../assets/img/gallery/g8.jpg" alt="Third slide"></div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" 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="#carouselExampleFade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>