Почему slick slider добавляет слайдеры вниз?

279

04 июня 2018, 12:20

Как видите 8 блоков 4 снизу 4 сверху все устроено флексбоксами.

Слайдер начинает свою работу при ширине меньше 768 пикселей (при ресайзе или при загрузке страницы ) CODEPEN ССЫЛКА ТУТ

Проблема заключается в том что если его touchpad-ом или же другим способом сменить то новый слайд добавляется вниз а иногда проста все изчезает и растет высота блока вот так

А нужно чтобы было так

В настройках я ничего особенного не сделал все стандартно и стабильно

          centerMode: true, //режим чтобы поставить блоки по центру
          infinite: true, //бесконечная прокрутка
          prevArrow: false, //убрал стрелки
          nextArrow: false, //убрал стрелки
          speed: 200, //скорость 200
          slidesToShow: 1, // показать 1 элемент
          slidesToScroll:1 //менять по одному элементу

Или же если кто нибудь предложит другое решение с использованием другова слайдера чтобы работал также я ответы принимаю.Главное чтобы работал

Очень хотел бы чтобы кто нибудь помог а то уже 4 ый день застрял на слайдере.

Answer 1

Вы в стилях явно указали где то ширину слайдов и собственно по этому они не помещаются

Я с !important изменил в @media стили отдельного слайда

Измените ваши стили

@media (max-width:768px) { 
  .container-slick { 
    max-width: 90% !important; 
    margin: auto; 
    border: 1px solid red; 
  } 
  .projects_block .slide { 
    max-width: 95% !important; 
    height: 100%; 
    background-size: 100% 100% !important; 
    margin: 0 -20px !important; 
    outline: none; 
  } 
} 
 
@media (max-width:555px) { 
  .container-slick { 
    max-width: 95% !important; 
    margin: auto; 
    border: 1px solid red; 
  } 
  .projects_block .slide { 
    max-width: 95% !important; 
    margin: 0 -30px !important; 
    outline: none; 
  } 
}