Как сделать слайдер (slick) адаптивным?

Question

[Константин Теплоухов]

Добрый день , раньше всегда юзал bootstrap так что с адаптивностью проблем особых не было ... но вот решил попробовать что-то сверстать хоть как-то адаптивно без него ... и чёт в ступоре . Но в ступоре из-за слайдера .
Подскажите как ? Желательно разжёвано так как бьюсь уже 2-3 часа ...
сайт

Answer 1

[Александр]

Собственно что-то похожее на медиа выражения только для слайдера. Так же тут все настройки.

$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

Comments

[Константин Теплоухов]

я это видел , но что-то в моём случае не прокает . Такое чувство будто ширина контейнеру слайдера задана фиксированная ... . Но не пойму от чего так .

[Александр]

Константин Теплоухов, Тогда не знаю. Могу лишь посоветовать добавлять по 1 элементу на слайд и смотреть на каком элементе слайдер "сломается".

[Константин Теплоухов]

Александр, Ладно , пойду спать . Может завтра 'озарение' придёт . А так , спасибо за совет , завтра попробую .

Answer 2

[Константин Теплоухов]

Крч решил , хз зачем но обёртке слайдера прописал display:flex . Вот всё по чертям и шло , вернул на блочный и всё стало тип топ ;)

Comments

[Александр Севиринов]

потому что slick сверстан блочно с float выравниванием.