Bootstrap Carousel
Code Here:
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active"> <img class="img-fluid"
src="../assets/images/big/img4.jpg" alt="First slide"> </div>
<div class="carousel-item"> <img class="img-fluid"
src="../assets/images/big/img5.jpg" alt="Second slide"> </div>
<div class="carousel-item"> <img class="img-fluid"
src="../assets/images/big/img6.jpg" alt="Third slide"> </div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button"
data-slide="next"> <span class="carousel-control-next-icon"
aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
</div>
With Indicators & Captions
First title goes here
this is the subcontent you can use this
Second title goes here
this is the subcontent you can use this
Third title goes here
this is the subcontent you can use this
Previous
Next
Code Here
<div id="carouselExampleIndicators2" class="carousel slide"
data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators2" data-slide-to="0"
class="active"></li>
<li data-target="#carouselExampleIndicators2" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators2" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="img-fluid" src="../assets/images/big/img3.jpg"
alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h3 class="text-white">First title goes here</h3>
<p>this is the subcontent you can use this</p>
</div>
</div>
<div class="carousel-item">
<img class="img-fluid" src="../assets/images/big/img4.jpg"
alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h3 class="text-white">Second title goes here</h3>
<p>this is the subcontent you can use this</p>
</div>
</div>
<div class="carousel-item">
<img class="img-fluid" src="../assets/images/big/img5.jpg"
alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h3 class="text-white">Third title goes here</h3>
<p>this is the subcontent you can use this</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators2"
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="#carouselExampleIndicators2"
role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
With Individual Interval
Code Here
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active" data-interval="10000"> <img class="img-fluid"
src="../assets/images/big/img3.jpg" alt="First slide"> </div>
<div class="carousel-item" data-interval="2000"> <img class="img-fluid"
src="../assets/images/big/img4.jpg" alt="Second slide"> </div>
<div class="carousel-item"> <img class="img-fluid"
src="../assets/images/big/img2.jpg" alt="Third slide"> </div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button"
data-slide="next"> <span class="carousel-control-next-icon"
aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
</div>