2

подскажите как сделать такой слайдер введите сюда описание изображения

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

2

1 ответ 1

4

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

Называетсья это прелесть 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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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