Посоветуйте такой слайдер/карусель jquery

174

02 апреля 2019, 07:30

Знает ли кто-нибудь на примете такой слайдер, чтоб можно было задавать количество дивов для одного слайда? Подробнее: есть к примеру такая разметка

<div class="slider">
    <div class="item">item 1</div>
    <div class="item">item 2</div>
    <div class="item">item 3</div>        
    <div class="item">item 4</div>
    <div class="item">item 5</div>
    <div class="item">item 6</div>
</div>

и нужно чтоб у одного слайда (одной прокрутки) было 2 item'а. В итоге будет 3 прокрутки, а не 6. Также чтоб можно было этим управлять на разных разрешениях. К примеру на мобильниках уже нужно будет задать по одному item в слайде и будет 6 слайдов соответственно.

Надеюсь понятно объяснил. Заранее спасибо.

Answer 1

Вам поможет owl-carousel. Количество элементов легко регулируется для разных разрешениях параметром responsive:

$('.owl-carousel').owlCarousel({
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})

Answer 2

Есть, например, lightSlider.
У него есть такая возможность.

$('#autoplay').lightSlider({ 
  auto: false, 
  loop: true, 
  item: 2, 
  slideMargin: 20 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link href="http://sachinchoolur.github.io/lightslider/src/css/lightslider.css" rel="stylesheet" /> 
<script src="http://sachinchoolur.github.io/lightslider/src/js/lightslider.js"></script> 
 
<ul id="autoplay"> 
  <li> 
    <img src="https://via.placeholder.com/215x215?text=Slide 1" /> 
  </li> 
  <li> 
    <img src="https://via.placeholder.com/215x215?text=Slide 2" /> 
  </li> 
  <li> 
    <img src="https://via.placeholder.com/215x215?text=Slide 3" /> 
  </li> 
  <li> 
    <img src="https://via.placeholder.com/215x215?text=Slide 4" /> 
  </li> 
  <li> 
    <img src="https://via.placeholder.com/215x215?text=Slide 5" /> 
  </li> 
  <li> 
    <img src="https://via.placeholder.com/215x215?text=Slide 6" /> 
  </li> 
</ul>