This is an automatic slider that goes to the next slide every 3 seconds, and unlike most sliders, where there was only one button left or right to flip through the slide, if we click left or right, the slide flips manually, which has the feature It matters. Also, the presence of a suitable hover on the left and right side of the slide helps guide the audience and makes the sliders more beautiful, which comes with the Thumbnail on hover.
HTML
<!-- This script got from www.devanswer.com -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="container">
<h1 class="center">Slider with Thumbnail Navigation On hover</h1>
<!-- main slider carousel -->
<div class="row">
<div class="col-md-12" id="slider">
<div class="col-md-12" id="carousel-bounding-box">
<div id="myCarousel" class="carousel slide">
<!-- main slider carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="1">
<img src="http://placehold.it/1200x480&text=one" class="img-responsive">
</div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/1200x480/888/FFF" class="img-responsive">
</div>
<div class="item" data-slide-number="3">
<img src="http://placehold.it/1200x480&text=three" class="img-responsive">
</div>
<div class="item" data-slide-number="4">
<img src="http://placehold.it/1200x480&text=four" class="img-responsive">
</div>
</div>
<!-- main slider carousel nav controls --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
</div>
<!--/main slider carousel-->
<!-- thumb navigation carousel -->
<div class="col-md-12 hidden-sm hidden-xs" id="slider-thumbs">
<!-- thumb navigation carousel items -->
<ul class="list-inline">
<li>
<a id="carousel-selector-1" class="selected">
<div class="slider-navigation">
Some text<br>
Some text here
</div>
</a></li>
<li> <a id="carousel-selector-2">
<div class="slider-navigation" style="background: darksalmon;">
Some text<br>
Some text here
</div>
</a></li>
<li> <a id="carousel-selector-3">
<div class="slider-navigation" style="background: bisque;">
Some text<br>
Some text here
</div>
</a></li>
<li> <a id="carousel-selector-4">
<div class="slider-navigation" style="background: burlywood;">
Some text<br>
Some text here
</div>
</a></li>
</ul>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
.center {
text-align: center;
}
.slider-navigation {
background: aquamarine;
padding: 30px 15px;
text-align: center;
}
#slider-thumbs {
margin-top: -100px;
}
#slider-thumbs .list-inline li {
width: 25%;
padding: 0px;
margin-right: -4px;
cursor: pointer;
}
#slider-thumbs .list-inline li:first-child {
padding-left: 5px;
}
.slider-nav-arrow {
text-align: center;
margin-bottom: 0px;
visibility: hidden;
}
.selected .slider-nav-arrow {
visibility: visible;
}
.selected .slider-navigation {
opacity: 0.5;
}Javascript
$('#myCarousel').carousel({
interval: 3000
});
// handles the carousel thumbnails
$('[id^=carousel-selector-]').hover(function () {
var id_selector = $(this).attr("id");
//console.log(id_selector);
var id = id_selector.substr(id_selector.length - 1);
//console.log(id);
id = parseInt(id);
$('#myCarousel').carousel(id - 1);
$('[id^=carousel-selector-]').removeClass('selected');
$(this).addClass('selected');
//console.log(this);
});
// when the carousel slides, auto update
$('#myCarousel').on('slid.bs.carousel', function (e) {
var id = $('.item.active').data('slide-number');
id = parseInt(id);
$('[id^=carousel-selector-]').removeClass('selected');
$('[id=carousel-selector-' + id + ']').addClass('selected');
});
