<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="gallery-container">
<div id="gallery" class="gallery-images">
<img src="http://placehold.it/500" alt="" />
<img src="http://placehold.it/501" alt="" />
<img src="http://placehold.it/502" alt="" />
<img src="http://placehold.it/500" alt="" />
<img src="http://placehold.it/500" alt="" />
</div>
<div class="gallery-thumbs-container">
<ul id="gallery-thumbs" class="gallery-thumbs-list">
<li class="thumb-item">
<div class="thumb">
<a href=""><img src="http://placehold.it/100" alt="" /></a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href=""><img src="http://placehold.it/101" alt="" /></a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href=""><img src="http://placehold.it/102" alt="" /></a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href=""><img src="http://placehold.it/100" alt="" /></a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href=""><img src="http://placehold.it/100" alt="" /></a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href=""><img src="http://placehold.it/100" alt="" /></a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href=""><img src="http://placehold.it/100" alt="" /></a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href=""><img src="http://placehold.it/100" alt="" /></a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href=""><img src="http://placehold.it/100" alt="" /></a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href=""><img src="http://placehold.it/100" alt="" /></a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href=""><img src="http://placehold.it/100" alt="" /></a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href=""><img src="http://placehold.it/100" alt="" /></a>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>jQuery(function () {
// If there are gallery thumbs on the page
if (jQuery('#gallery-thumbs').length > 0) {
// Cache the thumb selector for speed
var thumb = jQuery('#gallery-thumbs').find('.thumb');
// How many thumbs do you want to show & scroll by
var visibleThumbs = 6;
// Put slider into variable to use public functions
var gallerySlider = jQuery('#gallery').bxSlider({
controls: true,
pager: false,
easing: 'easeInOutQuint',
infiniteLoop: true,
speed: 500,
onAfterSlide: function (currentSlideNumber) {
thumb.removeClass('pager-active');
thumb.eq(currentSlideNumber).addClass('pager-active');
},
onNextSlide: function (currentSlideNumber) {
slideThumbs(currentSlideNumber, visibleThumbs);
},
onPrevSlide: function (currentSlideNumber) {
slideThumbs(currentSlideNumber, visibleThumbs);
}
});
// When clicking a thumb
thumb.click(function (e) {
// -6 as BX slider clones a bunch of elements
gallerySlider.goToSlide(jQuery(this).closest('.thumb-item').index() - 6);
// Prevent default click behaviour
e.preventDefault();
});
// Function to calculate which slide to move the thumbs to
function slideThumbs(currentSlideNumber, visibleThumbs) {
// Calculate the first number and ignore the remainder
var m = Math.floor(currentSlideNumber / visibleThumbs);
// Multiply by the number of visible slides to calculate the exact slide we need to move to
var slideTo = m * visibleThumbs;
// Tell the slider to move
thumbsSlider.goToSlide(slideTo);
}
// When you click on a thumb
jQuery('#gallery-thumbs').find('.thumb').click(function () {
// Remove the active class from all thumbs
jQuery('#gallery-thumbs').find('.thumb').removeClass('pager-active');
// Add the active class to the clicked thumb
jQuery(this).addClass('pager-active');
});
// Thumbnail slider
var thumbsSlider = jQuery('#gallery-thumbs').bxSlider({
controls: true,
pager: false,
easing: 'easeInOutQuint',
displaySlideQty: visibleThumbs,
moveSlideQty: visibleThumbs,
infiniteLoop: false
});
}
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.