jQuery carousel (waterwheel)

by Jesse M

HTML

<script src="https://www.jqueryscript.net/demo/jQuery-Waterwheel-Carousel-Plugin/js/jquery.waterwheelCarousel.min.js"></script>
  <ul id="carousel">
    <li><img src="https://www.jqueryscript.net/demo/jQuery-Waterwheel-Carousel-Plugin/images/1.jpg" id="item-1"/></li>
    <li><img src="https://www.jqueryscript.net/demo/jQuery-Waterwheel-Carousel-Plugin/images/2.jpg" id="item-2"/></li>
    <li><img src="https://www.jqueryscript.net/demo/jQuery-Waterwheel-Carousel-Plugin/images/3.jpg" id="item-3"/></li>
  </ul>
  <a href="#" id="prev">Prev</a>
  <a href="#" id="next">Next</a>

CSS

#carousel {
    height: 360px;
    display: relative;
    margin-top:40px;
  }
  #carousel img {
    display: hidden;
    cursor: pointer;
    width: 300px;
  }

JavaScript

var carousel = $("#carousel").waterwheelCarousel({
    flankingItems: 3,
  });

  $('#prev').bind('click', function () {
    carousel.prev();
    return false
  });

  $('#next').bind('click', function () {
    carousel.next();
    return false;
  });