Home
Tutorials
Microsoft Technologies Tutorials
Java Programming Tutorials
Web Designing Tutorials
Script Programming Tutorials
Database Programming Tutorials
Mobile Technologies Tutorials
Other Programming Tutorials
Examples
Articles
Tools
News
Bootstrap Carousel with Crossfade Example
Keywords : carousel, bootstrap, bootstrap carousel, bootstrap carousel example, bootstrap slideshow, bootstrap carousel slider, bootstrap carousel with crossfade, bootstrap carousel crossfade example
Example
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Carousel with Crossfade Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> .bcontent { margin-top: 10px; } .carousel-inner img { width: 100%; height: 100%; } </style> </head> <body> <div class="container bcontent"> <h2>Bootstrap Carousel</h2> <hr /> <div id="carouselExample" class="carousel slide carousel-fade" data-ride="carousel"> <!--Carousel Indicators--> <ol class="carousel-indicators"> <li data-target="#carouselExample" data-slide-to="0" class="active"></li> <li data-target="#carouselExample" data-slide-to="1"></li> <li data-target="#carouselExample" data-slide-to="2"></li> </ol> <!--Carousel Slides--> <div class="carousel-inner"> <div class="carousel-item active"> <img src="/images/bootstrap/city.jpg" alt="City"> <div class="carousel-caption"> <h5>Metro City</h5> <p>Metro cities are occupied with more humans.</p> </div> </div> <div class="carousel-item"> <img src="/images/bootstrap/lake.jpg" alt="Lake"> <div class="carousel-caption"> <h5>River Pond</h5> <p>River and pond difference is water movement.</p> </div> </div> <div class="carousel-item"> <img src="/images/bootstrap/tree.jpg" alt="Tree"> <div class="carousel-caption"> <h5>River Tree</h5> <p>Tree in the river pond.</p> </div> </div> </div> <!--Carousel Previous Next Controls--> <a class="carousel-control-prev" href="#carouselExample" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#carouselExample" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </div> </body> </html>
Click Here to See Result
Result
Previous
Next
