Simplest Image Carousel/Slideshow Plugin with jQuery

An ultra-light jQuery slideshow script that turns a list of images into an endless looping carousel with a basic next/prev navigation.

How to use it:

1. Place the jQuery library and the jQuery slideshow script at the bottom of your document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="scripts.js"></script>

2. Create a list of images for the carousel.

<div class="slider">
  <ul>
    <li><img src="img/img1.png"></li>
    <li><img src="img/img2.png"></li>
    <li><img src="img/img3.png"></li>
    <li><img src="img/img4.png"></li>
    ...
  </ul>
</div>

3. Add a next/prev navigation to the bottom of the image carousel.

<div id="slider-nav">
  <button data-dir="prev">Previous</button>
  <button data-dir="next">Next</button>
</div>

4. The sample CSS to style the image carousel.

ul { list-style: none; }

ul li {
  margin: 0;
  padding: 0;
}

.slider ul {
  width: 10000px;
  list-style: none;
}

.slider li { float: left; }

.slider {
  width: inherit;
  height: 300px;
  overflow: scroll;
}

#slider-nav {
  margin: 1em 0 0 0;
  display: none;
}

#slider-nav button {
  padding: 1em;
  outline: none;
  margin-right: 1em;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}

---

This awesome jQuery plugin is developed by stephenherko. For more Advanced Usages, please check the demo page or visit the official website.