Bootstrap Carousel
Carousel is a bootstrap component which use to add flexible, responsive sliders in the site. This component allows images, videos, iframes or any type of content.
For using this component individually, you have to link carousel.js or all at once by using bootstrap.js or bootstrap.min.js.
To implement the carousel, you just need to write the code with the following markup. There is no need for data attributes, just simple class-based development.
Example:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="jumbotron">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<img src="/bootstrap/images/slide1.png" alt="Slide 1 image">
</div>
<div class="item">
<img src="/bootstrap/images/slide2.png" alt="Slide 2 image">
</div>
<div class="item">
<img src="/bootstrap/images/slide3.png" alt="Slide 3 image">
</div>
</div>
<!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"> Previous </a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"> Next </a>
</div>
<!-- Carousel indicators -->
<ol class="jumbotron">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<img src="/bootstrap/images/slide1.png" alt="Slide 1 image">
</div>
<div class="item">
<img src="/bootstrap/images/slide2.png" alt="Slide 2 image">
</div>
<div class="item">
<img src="/bootstrap/images/slide3.png" alt="Slide 3 image">
</div>
</div>
<!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"> Previous </a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"> Next </a>
</div>
Run Example
Add Captions
If you want to add a caption to the slides you should use the .carousel-caption element within any .item class inside.
Example:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="jumbotron">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<img src="/bootstrap/images/slide1.png" alt="Slide 1 image">
<div class="carousel-caption"> Slide 1 caption </div>
</div>
<div class="item">
<img src="/bootstrap/images/slide2.png" alt="Slide 2 image">
<div class="carousel-caption"> Slide 2 caption </div>
</div>
<div class="item">
<img src="/bootstrap/images/slide3.png" alt="Slide 3 image">
<div class="carousel-caption"> Slide 3 caption </div>
</div>
</div>
<!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"> Previous </a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"> Next </a>
</div>
<!-- Carousel indicators -->
<ol class="jumbotron">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<img src="/bootstrap/images/slide1.png" alt="Slide 1 image">
<div class="carousel-caption"> Slide 1 caption </div>
</div>
<div class="item">
<img src="/bootstrap/images/slide2.png" alt="Slide 2 image">
<div class="carousel-caption"> Slide 2 caption </div>
</div>
<div class="item">
<img src="/bootstrap/images/slide3.png" alt="Slide 3 image">
<div class="carousel-caption"> Slide 3 caption </div>
</div>
</div>
<!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"> Previous </a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"> Next </a>
</div>
Run Example