I am trying to create a slider with thumbnails that displays 2 images at a time in the slider.
I got everything working thanks to minItems:2
The problem come with the thumbnail navigation.
When you click on the second thumbnail, the slider will move, and display the 3rd image on the slider, although the second image was already being displayed.
Is there a way to create 2 active thumbnails and make them sync to the images being shown in the slider?
The only other similar slider I found that uses this is nastygal in their product page.
Hope their is a way, because is not really user friendly the way it is now.
Thanks!
I am using this on a woocommerce store:
productSlider: {
selector: '#product-nav',
init: function () {
var base = this,
container = $(base.selector),
images = $('#product-images'),
zoom = images.data('zoom');
container.flexslider({
animation: "slide",
controlNav: false,
directionNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 106,
itemMargin: 10,
asNavFor: '#product-images'
});
images.flexslider({
animation: "slide",
controlNav: false,
directionNav: true,
animationLoop: false,
slideshow: false,
minItems: 2,
maxItems: 2,
prevText: '<i class="fa fa-angle-left"></i>',
nextText: '<i class="fa fa-angle-right"></i>',
sync: "#product-nav",
start: function(slider) {
if (zoom) {
$(slider.slides[0]).easyZoom({
preventClicks: false
});
}
},
before: function(slider) {
if (zoom) {
$(slider.slides[slider.animatingTo]).easyZoom({
preventClicks: false
});
}
}
});
}
},
I’m not sure about highlighting multiple thumbnails, but I do know that this slider was built to handle multiple images among many other features:
http://www.owlcarousel.owlgraphic.com/index.html