In these days of web application development, there are almost all websites have a beautiful images or video slider. In this blog, I am going to write about how you can make your own slider with the help of bootstrap framework. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive websites. Bootstrap is hugely popular, and very good at what it does. You can change styles according to your requirements.
Before going further you need to downlaod latest bootstrap framework & jquery files from this link:
http://getbootstrap.com/
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
Bootstrap framework contains a class called "Carousels". This is used for sliding <div>. Here is the example of a simple bootstrap slider.
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#slider" data-slide-to="0" class="active"></li>
<li data-target="#slider" data-slide-to="1"></li>
<li data-target="#slider" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="col-md-12" style="font-size: 20px; text-align: center;">
<img src="images/1.jpg" alt="Stories">
<p>
This community is developed for sharing knowledge for all individuals around the world. You can get full source code, logics and techniques from our qualified members. You can also access our Blogs & Article to keep your knowledge up to date.</p>
<h4 style="text-align: right;">
-Name1</h4>
</div>
</div>
<div class="item text-center">
<div class="col-md-12" style="font-size: 20px; text-align: center;">
<img src="images/2.jpg" alt="Stories">
<p>
This community is developed for sharing knowledge for all individuals around the world. You can get full source code, logics and techniques from our qualified members. You can also access our Blogs & Article to keep your knowledge up to date.</p>
<h4 style="text-align: right;">
-Name2</h4>
</div>
</div>
<div class="item">
<div class="col-md-12" style="font-size: 20px; text-align: center;">
<img src="images/3.jpg" alt="Stories">
<p>
This community is developed for sharing knowledge for all individuals around the world. You can get full source code, logics and techniques from our qualified members. You can also access our Blogs & Article to keep your knowledge up to date.</p>
<h4 style="text-align: right;">
-Name3</h4>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">
Previous</span> </a><a class="right carousel-control" href="#myCarousel" role="button"
data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true">
</span><span class="sr-only">Next</span> </a>
</div>
</div>
</div>
</div>
</div>
There are three part of this code:
- <!-- Indicators -->
- <!-- Wrapper for slides -->
- <!-- Left and right controls -->
1. <!-- Indicators --> :
In this part of code, indicates how many slides there is in the carousel, and which slide the user are currently viewing.
Class .carousel-indicators is used to specified as order lists, the attributes .data-target point to the id of carousel and the attributes .data-slide-to specifies which slide to go to, by clicking on the next button.
2. <!-- Wrapper for slides --> :
In this part of code, slides are specified in a <div> with class .carousel-inner. You can define multiple slide in separate <div>.
3. <!-- Left and right controls --> :
In this part of code, there are two buttons is used to navigate between slides. When you click on next button then next slide will be appear and when you click pre button the previous slide will be appear.
You can get full source code from this blog's attachment.
Hope you like this blog. Thank you for reading
