Адаптивные точки останова не работают для скользящего слайдера

Question

Я реализовал скользкий слайдер, который отлично работает без изменения размера браузера. Но когда я изменяю размер браузера до 1024, настройки чувствительной точки останова не работают.

Jquery--

$('.slider').slick({
  centerMode: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: true,
  infinite: true,
  cssEase: 'linear',
  variableWidth: true,
  variableHeight: true,
  mobileFirst: true,
  responsive: [{
    breakpoint: 1024,
    settings: {
      slidesToShow: 4,
      slidesToScroll: 1,
      centerMode: false
    }
  }]
});

Демонстрация - https://jsfiddle.net/squidraj/hn7xsa4y/4/

Любая помощь высоко ценится.

Answer 1

Добавьте эти настройки в свой код;

  $(".slides").slick({
       
        autoplay:true,
        mobileFirst:true,//add this one
        }

Answer 2

Добавлять slidesToShow а также slidesToScroll опция в каждой точке останова.

 {
  breakpoint: 786,
    settings: {
              slidesToShow: 3,
              slidesToScroll: 1,
              }
 },
 {
  breakpoint: 568,
    settings: {
              slidesToShow: 2,
              slidesToScroll: 1
            }
  }

Answer 3

Во-первых, опция "variableHeight" не существует в Slick Carousel.

Чтобы решить вашу проблему, удалите variableWidth: true, потому что это сделает ваши слайды полными карусели. И вы также не можете использовать параметр "mobileFirst", если ваша страница не использует эту методологию.

Итак, наконец, ваш конфиг должен быть таким, ниже

$('.slider').slick({
  centerMode: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: true,
  infinite: true,
  cssEase: 'linear',
  mobileFirst: true, //optional, to be used only if your page is mobile first
  responsive: [{
    breakpoint: 1024,
    settings: {
      slidesToShow: 4,
      slidesToScroll: 1,
      centerMode: false,
    }
  }]
});

С уважением.

Answer 4

tl;dr При изменении нескольких ползунков на странице $('.selector').slick({...})порядок помог

У меня была аналогичная проблема. Я не понимаю, почему, но slidesToShow: 2для меня это не повлияло на мобильное устройство, хотя, если вы измените его размер вперед и назад, оно вступит в силу. mobileFirst:trueпомогло, но сломал рабочий стол. Добавление обоих slidesToShowа также slidesToScrollне помогло. Но когда я поместил инициализацию ползунков в том же порядке, в котором они появляются на странице, это сработало. Я не понимаю, почему... Я не понимаю, как это исправить, если есть несколько страниц с разными положениями ползунка...

Answer 5

Это помогло мне.

    function resetSlick($slick_slider, settings) {
            $(window).on('resize', function() {
                if ($(window).width() < 320) {
                    if ($slick_slider.hasClass('slick-initialized')) {
                        $slick_slider.slick('unslick');
                    }
                    return
                }

                if (!$slick_slider.hasClass('slick-initialized')) {
                    return $slick_slider.slick(settings);
                }
            });
        }

 slick_slider = $('.client-logos');
    settings = {
        slidesToShow: 6,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000,
        prevArrow: '',
        nextArrow: '',
        pauseOnHover: true,

        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 5,
                    slidesToScroll: 1,
                }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 1
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1
                }
            }
            // You can unslick at a given breakpoint now by adding:
            // settings: "unslick"
            // instead of a settings object
        ]

    };
     slick_slider = $('.container');
    settings = {
        slidesToShow: 6,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000,
        prevArrow: '',
        nextArrow: '',
        pauseOnHover: true,

        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 5,
                    slidesToScroll: 1,
                }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 1
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1
                }
            }
            // You can unslick at a given breakpoint now by adding:
            // settings: "unslick"
            // instead of a settings object
        ]

    };
    slick_slider.slick(settings);
    resetSlick(slick_slider, settings);

Добавьте это к вашему js и вызовите слайдер, как показано на рисунке.

и в вашем CSS сделать slidedisplay: inline-block; вот и все. будет работать на всех адаптивных экранах.

Answer 6

Во-первых, вы используете старую версию Slick в вашем примере. Этот версон не поддерживает mobileFirst имущество. Во-вторых, вы должны удалить variableWidth если вы хотите использовать slidesToShow имущество. Это работает скрипка https://jsfiddle.net/Kosyanenko/2boaw2h3/1/

Answer 7

Я не уверен, почему ваш шаблон JS терпит неудачу с ниже:

 responsive: [{
    breakpoint: 1024,

Я буду следить за их документацией, сообществом или сообщать об ошибке.

В любом случае для этого лучше использовать медиазапросы CSS3. Один подход; гнездо div вокруг ползунка и поместите его relative масштабировать его и его дочерние элементы с width: 100%; и объявив max а также minwidth в пределах определенных разрешений. Это должно начать вас в правильном направлении. Убедитесь, что вы правильно используете метапорт.

Answer 8

mobileFirst:true,// добавьте это в свой файл JavaScript, и он должен работать :)