WooCommerce использует Flexslider для печати ползунка и миниатюр навигации ползунка HTML, и этот сценарий может быть нежелательным. Я добавляю Slick для создания прокрутки навигации с фиксированным размером ширины. Когда я нажимаю на расположение миниатюры 2, все миниатюры прокручиваются влево и показывают скрытые изображения, которые у нас были справа, и это то, что мы хотим. То же самое происходит, когда я нажимаю на миниатюру 3. Однако, когда мы нажимаем на миниатюры 4 и 5, они не прокручивают миниатюры, и теперь отображаются скрытые изображения. Здесь вы можете найти пример:
https://jsfiddle.net/retroriff/h7pyrm23/56/
$(document).ready(function() {
$('.flexslider').flexslider({
animation: "slide",
controlNav: "thumbnails",
animationLoop: false,
directionNav: false,
slideshow: false,
});
});
// Slick
$(document).ready(function() {
$('.flex-control-nav').slick({
arrows: false,
centerMode: false,
focusOnSelect: true,
infinite: false,
slidesToScroll: 1,
slidesToShow: 5,
speed: 600,
variableWidth: true,
});
})