Slick Slider - Отзывчивый выпуск - PullRequest
Новая
       21

Slick Slider - Отзывчивый выпуск

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

Я столкнулся с проблемой на прошлой неделе, пытаясь заставить мой слайдер работать правильно. Что происходит: Слайдер работает хорошо в отзывчивом режиме

В режиме реагирования на главной странице сайта слайдер работает должным образом. Карты-слайдеры прекрасно вписываются в любую ширину. Но когда мы входим на страницу продукта, то же самое ожидалось с тем же кодом ... Но мы получаем слайдер, показывающий более одного продукта за раз. И карты больше не реагируют ... Я заметил:

Код для правильного слайдера. Обратите внимание, что ширина, внутри тега list заложена, и она динамически изменяется в зависимости от ширины. 

<div class="slick-track" style="opacity: 1; width: 5244px; transform: translate3d(0px, 0px, 0px);">
<li layout="ef3fcb99-de72-4251-aa57-71fe5b6e149f" class="motor slick-slide slick-current slick-active" style="width: 397px;" tabindex="0" role="tabpanel" id="slick-slide20" aria-describedby="slick-slide-control20" data-slick-index="0" aria-hidden="false">

Неправильный код. Обратите внимание, что в списке нет ширины. И я не могу поставить это вручную, так как это динамически c. 

<div class="slick-track" style="opacity: 1; width: 10000px; transform: translate3d(-20px, 0px, 0px);">
<li layout="ef3fcb99-de72-4251-aa57-71fe5b6e149f" class="on-road---moto-atacado slick-slide slick-current slick-active" style="" data-slick-index="0" aria-hidden="false" tabindex="0" role="tabpanel" id="slick-slide00" aria-describedby="slick-slide-control00">

Ползунок, показывающий 2 изображения и со смещением в 20 пикселей влево

Вот мой JS конфиг. 

$(document).ready(function() {
    $('.helperComplement').remove();
    $('.home-main-banner').slick({
        dots:false,
        fade: true,
        autoplay:true,
        autoplaySpeed : 3000,
        slidesToShow   : 1,
        slidesToScroll : 1
    });
    $('.showcase-default.prod-vitri .prateleira ul').slick({
        infinite: false,
        dots:false,
        slidesToShow   : 4,
        slidesToScroll : 1,
        variableWidth : true,
        responsive: [
            {
            breakpoint: 1024,
                settings: {
                    slidesToShow   : 4,
                    slidesToScroll : 1,
                }
            }, 
            {
              breakpoint: 768,
              settings: {
                slidesToShow   : 3,
                slidesToScroll : 1,
              }
            }, 
            {
            breakpoint: 480,
                settings: {
                    dots:true,
                    slidesToShow   : 1,                     
                    slidesToScroll : 1
                }
            }
        ]
    });

    if (window.innerWidth < 768) {
        $('.home-band ul').slick({
            infinite: true,
            arrows:false,
            dots:false,
            centerMode:true,
            autoplay:true,
            slidesToShow   : 1,
            slidesToScroll : 1,
            autoplaySpeed : 1000,
        });                 
    }

    $('.bread-crumb li:first-child a').text('Moto Atacado');
    if (window.innerWidth > 800) {
        $('#product-content .select.select--main').slick({
            dots           : !0,
            infinite       : !0,
            slidesToShow   : 4,
            slidesToScroll : 2
        });
    }else {
        $('#product-content .select.select--main').slick({
            dots           : !0,
            infinite       : !0,
            slidesToShow   : 2,
            slidesToScroll : 1

        });
    }

Сайт https://www.motoatacado.com.br/

Заранее спасибо!

...