There are different jQuery slideshow modules that are accessible for spinning through components. However, on the off chance that the web application utilizes the Bootstrap system, an extra jQuery module isn’t expected to slideshow components like a merry go round. Bootstrap JS Carousel (carousel.js) gives a simple method to execute a merry go round slider on the site page.
In this instructional exercise, we’ll tell you the best way to make a merry go round picture slider with Bootstrap. Likewise, utilizing our model code, you can expand the Bootstrap merry go round usefulness and make the various kinds of the slider.
Before you begin with the Bootstrap merry go round, incorporate the Bootstrap and jQuery library first.
<!-- Compiled and minified Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" > <!-- Minified JS library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Compiled and minified Bootstrap JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
Carousel Slider with Bootstrap
The following example creates a basic carousel slider.
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/image-1.jpg" alt="">
</div>
<div class="item">
<img src="images/image-2.jpeg" alt="">
</div>
<div class="item">
<img src="images/image-3.jpeg" alt="">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
Bootstrap Carousel Slider with Captions
The following example creates a carousel slider and adds captions to slides.
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/image-1.jpg" alt="">
<div class="carousel-caption">
<h3>First Slide</h3>
<p>This is the first image slide</p>
</div>
</div>
<div class="item">
<img src="images/image-2.jpeg" alt="">
<div class="carousel-caption">
<h3>Second Slide</h3>
<p>This is the second image slide</p>
</div>
</div>
<div class="item">
<img src="images/image-3.jpeg" alt="">
<div class="carousel-caption">
<h3>Third Slide</h3>
<p>This is the third image slide</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
Bootstrap Carousel Slider with Custom Controls
The following example calls the carousel manually and provides the custom controls to cycles the previous and next item.
<div id="myCarouselCustom" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarouselCustom" data-slide-to="0" class="active"></li>
<li data-target="#myCarouselCustom" data-slide-to="1"></li>
<li data-target="#myCarouselCustom" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/image-1.jpg" alt="">
<div class="carousel-caption">
<h3>First Slide</h3>
<p>This is the first image slide</p>
</div>
</div>
<div class="item">
<img src="images/image-2.jpeg" alt="">
<div class="carousel-caption">
<h3>Second Slide</h3>
<p>This is the second image slide</p>
</div>
</div>
<div class="item">
<img src="images/image-3.jpeg" alt="">
<div class="carousel-caption">
<h3>Third Slide</h3>
<p>This is the third image slide</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Custom Controls -->
<a href="javascript:void(0);" id="prevBtn">Prev Slide</a>
<a href="javascript:void(0);" id="nextBtn">Next Slide</a>
JavaScript Code:
<script type="text/javascript">
// Call carousel manually
$('#myCarouselCustom').carousel();
// Go to the previous item
$("#prevBtn").click(function(){
$("#myCarouselCustom").carousel("prev");
});
// Go to the previous item
$("#nextBtn").click(function(){
$("#myCarouselCustom").carousel("next");
});
</script>
Carousel Options
The following options are available to configure Bootstrap Carousel as per your needs.
- interval (number) – Specifies the amount of time to delay between automatically cycling. Set to stop automatically cycling. The default delay time is milliseconds.
- pause (string | null) – Pauses the cycling on mouseenter and resumes the cycling on mouse leave. Set to stop pause cycling on hover. The default value is
hover. - wrap (boolean) – Specifies whether the carousel should cycle continuously or stop at the last slide. The default value is
true. - keyboard (boolean) – Specifies whether the carousel should react to keyboard events. The default value is
true.