Slick-слайдер: как отцентровать один слайд?

628

05 марта 2017, 07:39

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

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

Answer 1

Задайте центрирование для картинки с помощью "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>