1

Уже 4 дня не могу разобратсья.Вопрос за которую стоит награда в 50 баллов вот тут

Есть 8 блока 4 снизу 4 сверху. Слайдер начинает свою работу при ширине меньше 990 пикселей вот если не добавить ничего то он работает прекрасно но если добавить breakpoint чтобы указать в каком размере надо уменшить показ слайдеров то есть при ширине меньше 568 пикселей мне надо показать один слайдер а иначе два.Ну вот при добавлении этой конфигурации он работает до того момента если его ресайзить.

Если уменшить окно до указываемого (568пикселей) размера потом увеличить то все изчезает

Если проста удалить эту часть конфигурации то все работает нормально

responsive: [{
                breakpoint: 568,
                settings: {
                slidesToShow: 1
             }
        }]

Ссылка на codepen

Также мой slick config полностью

$(window).on('load', function(){
    if($(window).width() < 990){
     $('.container-slick').slick({
          centerMode: true,
          infinite: true,
          prevArrow: false,
          nextArrow: false,
          speed: 200,
          slidesToShow: 2,
          slidesToScroll:1,
          autoplay:true,
            responsive: [{
                breakpoint: 568,
                settings: {
                    slidesToShow: 1
                }
            }]
        });
    }
  });
$(window).on('resize', function(){
    if($(window).width() < 990){
     $('.container-slick').not('.slick-initialized').slick({
          centerMode: true,
          infinite: true,
          prevArrow: false,
          nextArrow: false,
          speed: 200,
          slidesToShow: 2,
          slidesToScroll:1,
         // if you remove from here
            responsive: [{
                breakpoint: 568,
                settings: {
                    slidesToShow: 1
                }
            }]
            // to there everything will work but i need 1 slide in small screens and 2 in screens more than 568 pixels
        });
    }
    else{
      $(".container-slick.slick-initialized").slick("unslick");
    }
  });
5
  • ну пользователь сказал что в хроме у него проблема не воспроизводится ..возможно надо добавить какие то преффиксы !
    – user33274
    28 мая 2018 в 4:45
  • I added prefixes and the situation in firefox devoloper edition is the same as in chrome
    – user33274
    28 мая 2018 в 4:51
  • @МаксимЛенский неее.Проблема не в префиксах а в том что контент изчезает
    – Randall
    28 мая 2018 в 8:03
  • 1
    это видеть надо ..я почитал что пишут на SO проверил ..у меня в firefox всё видно в хроме тоже и в опере во всех разрешениях экрана ...ctrl+f5 нажми может кэш мешает
    – user33274
    28 мая 2018 в 8:33
  • @МаксимЛенский да все дело в кеше как всегда ты прав O.o отвечай на обе вопроса и забирай свои баллы :)
    – Randall
    28 мая 2018 в 11:59

2 ответа 2

1
+50

можно использовать setTimeout c небольшой задержкой... Видимо из-за того, что при нажатии кнопки "развернуть на всё окно" ресайз окна происходит не сразу (из-за анимации) и как следствие из-за большого количества промежуточных значений в короткий срок происходит баг

$(window).on('load', function(){
    if($(window).width() < 990){
     $('.container-slick').slick({
          centerMode: true,
          infinite: true,
          prevArrow: false,
          nextArrow: false,
          speed: 200,
          slidesToShow: 2,
          slidesToScroll:1,
          autoplay:true,
            responsive: [{
                breakpoint: 568,
                settings: {
                    slidesToShow: 1
                }
            }]
        });
    }
  });
$(window).on('resize', function(){
    if($(window).width() < 990){
      setTimeout(function(){
        $('.container-slick').not('.slick-initialized').slick({
          centerMode: true,
          infinite: true,
          prevArrow: false,
          nextArrow: false,
          speed: 200,
          slidesToShow: 2,
          slidesToScroll:1,
            responsive: [{
                breakpoint: 568,
                settings: {
                    slidesToShow: 1
                }
            }]
        });
      },100)

    }
    else{
    setTimeout(function(){  $(".container-slick.slick-initialized").slick("unslick"); },100)  
    }
  });

ссылка на codepen

4
  • вот это я понимаю .Аплодисменты :)
    – Randall
    25 июн 2018 в 18:55
  • а вопрос зачем setTimeOut можете обяснить более развернуто?
    – Randall
    25 июн 2018 в 18:57
  • Моё предположение заключается в том, что анимация развертывания и свёртывания окна браузера длится несколько милисекунд из-за анимации самого браузера, и функция ресайза обрабатывает все размеры окна пока оно расширяется, т.е. обработка slick-slider запускается на каждый дополнительный пиксель увеличения окна в очень короткие сроки...., используя setTimeout мы дожидаемся пока закончится анимация браузера и тогда запускаем slick-slider 25 июн 2018 в 19:06
  • понял спасибо я принял ваш ответ также в анг части stackoverflow
    – Randall
    25 июн 2018 в 20:08
0

ctrl+f5 очистите кэш именно той страницы на которой находитесь и незабываем о префиксах

8
  • нет кстати проблема есть простите за ложную инфу
    – Randall
    28 мая 2018 в 12:06
  • какая проблема ?
    – user33274
    28 мая 2018 в 12:06
  • надо проста увеличить страницу через квадратик резко то есть сначала уменшитье до 1 го слайда потом нажмите на квадратик и увидите как все изчезает =(
    – Randall
    28 мая 2018 в 12:07
  • какой квадратик ?
    – user33274
    28 мая 2018 в 12:08
  • в браузере наверху есть же икс underscore и квадрат
    – Randall
    28 мая 2018 в 12:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.