Слайдер с бесконечной прокруткой

142

01 июня 2019, 20:30

Как сделать слайдер с бесконечной прокруткой, где при нажатии на правую стрелку, например, первый блок за пределами страницы перемещается в конец и показывается после пятого блока, (т.е. показ. 4,5 и 1-й, а второй и третий исчезают). На экране показываются только три блока, а два за стрелками скрыты.

Answer 1

Воспользуйтесь библиотекой slick. Стилизуется без проблем.

codepen.io

jQuery('.slider').slick({ 
  slidesToShow: 3, 
  slidesToScroll: 1 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet"/> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script> 
 
 
<div class="slider"> 
  <div> 
    Slide 1 
  </div> 
  <div> 
    Slide 2 
  </div> 
  <div> 
    Slide 3 
  </div> 
  <div> 
    Slide 4 
  </div> 
  <div> 
    Slide 5 
  </div> 
</div>