Preview
Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->
<style>
.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;
}
</style>
</head>
<body>
<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>
<script>
$('#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');
});
</script>
</body>
</html>