Advise such a slider/carousel jquery

Question

Advise such a slider/carousel jquery

Does anyone know of such a slider in mind, so that you can set the number of divs for one slide? Read more: there is, for example, such a markup

<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>

And it is necessary that one slide (one scroll) has 2 items. The result will be 3 scrolls, not 6. Also, so that you can manage it at different resolutions. For example, on mobile phones, you will already need to set one item per slide and there will be 6 slides, respectively.

I hope I explained it clearly. In advance thanks.

0

html css jquery slider carousel

Author: websterjoy, 2018-11-06

Source

2 answers

score 1 · Answer 1

The owl-carousel will help you. The number of elements can be easily adjusted for different resolutions by the parameter responsive:

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

score 1 · Answer 2

There is, for example, lightSlider.
He has the opportunity.

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