Boostrap Slider – We are going to show you, how to use boostrap carousel slider on your webpage. We will discuss full width boostrap carousel slider and bootstrap carousel with multiple items.
We design web pages to create an attractive web page that can be made good by dicing the web page with the Coursol sliders.
It can also be used for with or without Jquery, Javascript, and it is very easy to use for it, we need to keep our web page foot in the CSS and JS Library latest version of Booster and our web page has to be footed And it will start working.
It is not that we can not jquery him with bootstrap. We can also initiate bootstrap carousel slider from jquery.
Bootstrap Carousel Slider with Multiple Item
Carousel Full Width Slider
Captions Carousel Slider
Thumbnails Carousel Slider
Let’s start boostrap carousel slider
CDN Boostrap Css & Js lib
Click here and get latest versions of boostrap css and js cdn lib. Use this lib on your web page head section and after that follow next steps.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Full width boostrap carousel sliders
IF you want to use full width bootstrap carousel slider in you web page, so use this below html.
<div class="container">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="//www.tutsmake.com/wp-content/uploads/2019/03/install-sublime-on-ubunut.jpeg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="//www.tutsmake.com/wp-content/uploads/2019/03/boostrap-datetimepicker.jpeg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="//www.tutsmake.com/wp-content/uploads/2019/03/laravel-razorpay-payment.jpeg" 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>
</div>
Bootstrap carousel with multiple items
IF you want to use bootstrap carousel slider with multiple items in you web page, so use this below html.
<div class="container">
<div class="carousel slide" data-ride="carousel" id="multi_item">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-sm"><img class="d-block w-100" src="//www.tutsmake.com/wp-content/uploads/2019/03/install-sublime-on-ubunut.jpeg" alt="1 slide"></div>
<div class="col-sm"><img class="d-block w-100" src="//www.tutsmake.com/wp-content/uploads/2019/03/boostrap-datetimepicker.jpeg" alt="2 slide"></div>
<div class="col-sm"><img class="d-block w-100" src="//www.tutsmake.com/wp-content/uploads/2019/03/laravel-razorpay-payment.jpeg" alt="3 slide"></div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-sm"><img class="d-block w-100" src="//www.tutsmake.com/wp-content/uploads/2019/03/install-sublime-on-ubunut.jpeg" alt="4 slide"></div>
<div class="col-sm"><img class="d-block w-100" src="//www.tutsmake.com/wp-content/uploads/2019/03/boostrap-datetimepicker.jpeg" alt="5 slide"></div>
<div class="col-sm"><img class="d-block w-100" src="//www.tutsmake.com/wp-content/uploads/2019/03/laravel-razorpay-payment.jpeg" alt="6 slide"></div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#multi_item" 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="#multi_item" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Boostrap Carousel Slider with captions
Use the below html for Boostrap Carousel Slider with captions.
<div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-2" data-slide-to="1"></li>
<li data-target="#carousel-example-2" data-slide-to="2"></li>
</ol>
<!--/.Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="view">
<img class="d-block w-100" src="//www.tutsmake.com/wp-content/uploads/2019/03/laravel-multi-auth-1.jpeg" alt="First slide">
<div class="mask rgba-black-light"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">First Image</h3>
<p>First text</p>
</div>
</div>
<div class="carousel-item">
<!--Mask color-->
<div class="view">
<img class="d-block w-100" src="//www.tutsmake.com/wp-content/uploads/2019/03/best-wordpress-hosting-2019.jpeg" alt="Second slide">
<div class="mask rgba-black-strong"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">Second Image</h3>
<p>Secondary text</p>
</div>
</div>
<div class="carousel-item">
<!--Mask color-->
<div class="view">
<img class="d-block w-100" src="//www.tutsmake.com/wp-content/uploads/2019/03/node-js-mysql-crud.jpeg" alt="Third slide">
<div class="mask rgba-black-slight"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">Third Image</h3>
<p>Third text</p>
</div>
</div>
</div>
<!--/.Slides-->
<!--Controls-->
<a class="carousel-control-prev" href="#carousel-example-2" 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="#carousel-example-2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
</div>
Boostrap Carousel Slider with Thumbnails
For showing thumbnails on Boostrap Carousel Slider. use the below html.
<style type="text/css">
.carousel-indicators li{
width: 130px !important;
}
.carousel-indicators{
bottom: 0px !important;
}
</style>
<h4 class="text-center mb-3">Boostrap Carousel Slider with Thumbnails</h4>
<div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails" data-ride="carousel">
<!--Slides-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block w-100" src="//www.tutsmake.com/wp-content/uploads/2019/03/best-wordpress-hosting-2019.jpeg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="//www.tutsmake.com/wp-content/uploads/2019/03/install-git.jpeg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="//www.tutsmake.com/wp-content/uploads/2019/02/laravel-passport-rest-full-apis.jpeg" alt="Third slide">
</div>
</div>
<!--/.Slides-->
<!--Controls-->
<a class="carousel-control-prev" href="#carousel-thumb" 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="#carousel-thumb" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
<ol class="carousel-indicators">
<li data-target="#carousel-thumb" data-slide-to="0" class="active"> <img class="d-block w-100" src="//www.tutsmake.com/wp-content/uploads/2019/03/laravel-google-recaptcha.jpeg"
class="img-fluid"></li>
<li data-target="#carousel-thumb" data-slide-to="1"><img class="d-block w-100" src="//www.tutsmake.com/wp-content/uploads/2019/03/install-git.jpeg"
class="img-fluid"></li>
<li data-target="#carousel-thumb" data-slide-to="2"><img class="d-block w-100" src="//www.tutsmake.com/wp-content/uploads/2019/02/laravel-passport-rest-full-apis.jpeg"
class="img-fluid"></li>
</ol>
</div>
Via JavaScript
If you want to full controls on bootstrap carousel slider. Call carousel manually with the code below.
$('.carousel').carousel();
.carousel(options)
Initializes the carousel with an optional options object and starts cycling through items.
$('.carousel').carousel({
interval: 2000
})
.carousel(‘cycle’)
Cycles through the carousel items from left to right.
.carousel(‘pause’)
Stops the carousel from cycling through items.
.carousel(number)
Cycles the carousel to a particular frame (0 based, similar to an array). Returns to the caller before the target item has been shown (i.e. before the slid.bs.carousel event occurs).
.carousel(‘prev’)
Cycles to the previous item. Returns to the caller before the previous item has been shown (i.e. before the slid.bs.carousel event occurs).
.carousel(‘next’)
Cycles to the next item. Returns to the caller before the next item has been shown (i.e. before the slid.bs.carousel event occurs).
.carousel(‘dispose’)
Destroys an element’s carousel.
