Slick slider center mode

212

27 июня 2018, 19:20

Ребята, нужно реализовать такую карусель

Вот нашла такой код https://codepen.io/RhinoLu/pen/grKbKW?editors=1010 , но мне не нужно что бы была центральная картинка. Не знаю как это сделать. Может подскажите и вовсе другой вариант. Буду признательна.

Answer 1

Slick Слайдер c centerMode:true:

$('.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>