<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Owl Carousel 2 Thumbnails</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<div class="owl-slider">
<div class="item slider">Slider 1</div>
<div class="item slider">Slider 2</div>
<div class="item slider">Slider 3</div>
<div class="item slider">Slider 4</div>
</div>
<div class="thumbnails-wrapper">
<div class="thumbnail"><a href="#">Link 1</a></div>
<div class="thumbnail"><a href="#">Link 2</a></div>
<div class="thumbnail"><a href="#">Link 3</a></div>
<div class="thumbnail"><a href="#">Link 4</a></div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/claudiopedrom/owl-carousel-2-thumbnails-JGpbQy */
.slider {
width: 100%;
height: 200px;
background: black;
color: white;
text-align: center;
}
.thumbnail {
width: 25%;
height: 100px;
float: left;
background: gray;
}
.thumbnail.active {
background: blue;
}
.thumbnail:hover {
background: blue;
}
.thumbnail a {
display: block;
width: 100%;
height: 100%;
color: white;
text-align: center;
text-decoration: none;
}
/*Downloaded from https://www.codeseek.co/claudiopedrom/owl-carousel-2-thumbnails-JGpbQy */
$(document).ready(function() {
// Init Slider
$('.owl-slider').owlCarousel({
items: 1,
loop: true,
autoplay: true,
nav: false,
dots: false,
});
// Pref add class active to 1st thumbnail via js
$('.thumbnail').eq(0).addClass('active');
// When slider autoplay or drag is true
$('.owl-slider').on('changed.owl.carousel', function(event) {
$('.thumbnail').removeClass('active');
var sliders = 4;
var currentItem = event.item.index - 2;
if(currentItem >= sliders) {
currentItem = 0;
}
$('.thumbnail').eq(currentItem).addClass('active');
});
// When thumbnail is clicked
$('.thumbnail a').click(function(event) {
event.preventDefault();
$('.thumbnail').removeClass('active');
var index = $('.thumbnail a').index(this);
$('.thumbnail').eq(index).addClass('active');
$('.owl-slider').trigger('to.owl.carousel', [index, 300, true]);
});
});
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
OWL Carousel
Normalize
jQuery
v2.1.3
