1

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

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

4
  • Как понять "не нужно чтобы была центральная картинка"? Вы хотите четыре итема видеть вместо трех? Или нужно убрать фокус с центрального элемента? Slick достаточно хороший, и вполне может решить вашу задачу
    – Yuriy
    4 июн 2018 в 12:29
  • документация kenwheeler.github.io/slick 4 июн 2018 в 12:53
  • Исправьте ссылку в вопросе 26 сен 2020 в 15:05
  • 1
    данный вопрос в виде картинки следует закрыть, потому что он бесполезен для базы знаний (тот, у кого возникнет подобный вопрос, не сможет найти данный вопрос и ответы к нему) 27 сен 2020 в 6:28

1 ответ 1

0

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>

2
  • спасибо, но выдает ошибку и все position смещаются(Chrom), а в Opera совсем нет карусели. Oшибка: Uncaught TypeError: _.$list.on is not a function. не подскажите в чем проблема?
    – maRIA M.
    4 июн 2018 в 14:12
  • @maRIAM. Вы тут видите ошибку? Логично предположить что в ваших скриптах где-то ошибка
    – SVE
    4 июн 2018 в 15:58

Ваш ответ

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

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