1

Установил на сайте slick-слайдер и адаптировал его через responsive под разные размеры экрана. Так получается, что для экранов менее 460px показывать два слайда - много. А один прижимается к левой стрелке, и справа остаётся пустое пространство.

Как сделать, чтобы при показе одного слайда, он был по центру, между стрелками?

введите сюда описание изображения

3
  • Скриншот хотя бы можно? Как вы адаптировали? Вы в курсе что slick сам высчитывает ширину и по дефолту для одного слайда ширина равна ширине блока родителя 3 мар 2017 в 10:07
  • @programmer403, добавил скриншон, не знаю, правда, как это поможет - из описания, вроде, всё ясно 3 мар 2017 в 10:11
  • @programmer403, я же написал - адаптировал через параметр responsive. Ничего slick сам не вычисляет - если не прописывать отдельно каждый breakpoint, он на любом устройстве будет показывать десктопный вариант (то есть все слайды смешивать в кучу друг на друге) 3 мар 2017 в 10:13

2 ответа 2

3

Задайте центрирование для картинки с помощью "margin: 0 auto". Вот пример https://jsfiddle.net/5a47jk3L/

$('.single').slick({
  autoplay: true,
  autoplaySpeed: 500
});
.single .slide img {
  margin: 0 auto
}
<link href="https://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>


  <div class="single">
    <div class="slide">
      <img src="https://i.stack.imgur.com/x6QRX.jpg">
    </div>
    <div class="slide">
      <img src="https://i.stack.imgur.com/x6QRX.jpg">
    </div>
    <div class="slide">
      <img src="https://i.stack.imgur.com/x6QRX.jpg">
    </div>

2
  • А как сделать, что бы я мог разместить справа еще блок, а слайдер был только слева?
    – user364613
    19 дек 2019 в 14:15
  • @user364613 вам слайдер нужно чтобы был горизонтальный или вертикальный слева? 5 фев 2020 в 16:15
1

Необходимо указать в параметрах centerMode: true

1
  • 2
    Постарайтесь давать более развернутые ответы.
    – Ep1demic
    8 ноя 2017 в 14:06

Ваш ответ

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

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