Super Easy jQuery Responsive Slideshow Plugin - unleashSlider

A really simple jQuery plugin to create a Carousel-like image slider that automatically circles through a list of images with a cross-fade effect. The images will be auto resized and centered if you shrink the screen into a tiny window.

How to use it:

1. Import the jQuery library and the jQuery unleashSlider plugin into the web page.

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

2. Insert a list of images into the slideshow

<ul class="slider">
  <li><img src="1.jpg" alt="Placeholder"></li>
  <li><img src="2.jpg" alt="Placeholder"></li>
  <li><img src="3.jpg" alt="Placeholder"></li>
  <li><img src="4.jpg" alt="Placeholder"></li>
  <li><img src="5.jpg" alt="Placeholder"></li>
</ul>

3. The core CSS styles for the slideshow.

/* Actual Slider Element */

.slider {
  display: block;
  width: 100%;
  max-width: 800px;
  margin: 40px auto;
  padding: 0;
  list-style: none;
}

/* Slider Direct Child Element */

.slider li {
  width: 100%;
  display: none;
  margin: 0;
  padding: 0;
}

/* Slider First Direct Child */

.slider li:first-child { display: block; }

/* Slider Images, always flex with width of slider */

.slider li img {
  width: 100%;
  height: auto;
}

4. Initialize the slideshow on document ready and done.

$(document).ready(function() {
  unleashSlider('.slider');
});

---

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