Как сделать аналогичный слайдер?

199

24 июня 2018, 06:20

подскажите как сделать такой слайдер

понимаю что сделан с помощью плагина Swiper но сделать такой не получается :( слайдер есть здесь https://mserj.ru/works/109/index.html

Answer 1

Вот вам слайдер так как хотели в предидущем ответе и тут.

Называетсья это прелесть waterwheelCarousel впервые использовал между прочим

Я добавил prev и next кнопки измените их на стрелки и будет то что вам надо

$(document).ready(function () { 
  var carousel = $("#carousel").waterwheelCarousel({ 
    flankingItems: 3, 
  }); 
 
  $('#prev').bind('click', function () { 
    carousel.prev(); 
    return false 
  }); 
 
  $('#next').bind('click', function () { 
    carousel.next(); 
    return false; 
  }); 
});

<!Doctype html> 
<html> 
<head> 
<title> this is jquery carousel</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script type="text/javascript" src="https://www.jqueryscript.net/demo/jQuery-Waterwheel-Carousel-Plugin/js/jquery.waterwheelCarousel.min.js"></script> 
</head> 
<body> 
  <div id="carousel"> 
    <img src="https://www.jqueryscript.net/demo/jQuery-Waterwheel-Carousel-Plugin/images/1.jpg" id="item-1"/> 
    <img src="https://www.jqueryscript.net/demo/jQuery-Waterwheel-Carousel-Plugin/images/2.jpg" id="item-2"/> 
    <img src="https://www.jqueryscript.net/demo/jQuery-Waterwheel-Carousel-Plugin/images/3.jpg" id="item-3"/> 
    <img src="https://www.jqueryscript.net/demo/jQuery-Waterwheel-Carousel-Plugin/images/4.jpg" id="item-4"/> 
    <img src="https://www.jqueryscript.net/demo/jQuery-Waterwheel-Carousel-Plugin/images/5.jpg" id="item-5"/> 
    <img src="https://www.jqueryscript.net/demo/jQuery-Waterwheel-Carousel-Plugin/images/6.jpg" id="item-6"/> 
  </div> 
  <a href="#" id="prev">Prev</a> 
  <a href="#" id="next">Next</a> 
 
</body> 
</html>