Slick. js не прокручивает миниатюры - PullRequest
Новая
       94

Slick. js не прокручивает миниатюры

0 голосов
/ 04 февраля 2020

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,
  });
})
...