Адаптивный Slick

224

02 июля 2018, 06:40

Столкнулась в такой проблемой - нет адаптивности слайдера. Картинки все слипаются и выглядит это не очень. Подскажите как решить проблему?

$('.slider').slick({ 
  slidesToShow: 3, 
  slidesToScroll: 1,                
  dots: false, 
  arrows:false, 
  infinite: true,  
  //variableWidth: true,   
  centerMode:true 
});

img { 
  max-width: 200px; 
  width: 100%; 
  border:1px solid #fff; 
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script> 
   
  <div class="slider"> 
    <div> 
      <img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt=""> 
    </div> 
    <div> 
      <img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt=""> 
    </div> 
    <div> 
      <img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt=""> 
    </div> 
    <div> 
      <img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt=""> 
    </div> 
    <div> 
      <img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt=""> 
    </div> 
  </div>

Answer 1

После "centerMode:true," добавляем такое свойство:

responsive: [ { breakpoint: 1024, // - от какой ширины изменять настройки(1024 и ниже) settings: { // вносим изменения на ширине 1024 и ниже slidesToShow: 2, slidesToScroll: 2 } }, { breakpoint: 480, // брекпоинтов может быть сколько угодно settings: { slidesToShow: 1, slidesToScroll: 1 } } ]

Таким способом можно менять любые настройки слайдера на различных экранах