Basic Automatic Image Slider/Carousel Plugin with jQuery - Flimsy Slider

Flimsy Slider is a super easy jQuery slider plugin to create a responsive, automatic and infinite-looping image carousel with sliding captions.

How to use it:

1. Create a basic image carousel from an Html unordered list.

<ul class="flimsyslider">
  <li> <img src="http://lorempixel.com/900/450" alt="">
    <div class="caption">Caption One</div>
  </li>
  <li> <img src="http://lorempixel.com/900/450" alt="">
    <div class="caption">Caption Two</div>
  </li>
  <li> <img src="http://lorempixel.com/900/450" alt="">
    <div class="caption">Caption Three</div>
  </li>
</ul>

2. Load jQuery library and the jQuery Flimsy Slider's script at the end of the document.

<script src="/ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/flimsyslider.js"></script>

3. The basic CSS styles for the image carousel.

.slider-container {
  overflow: hidden;
  position: relative;
}

.flimsyslider {
  list-style: none;
  padding: 0;
  margin: 0;
}

.flimsyslider img {
  width: 100%;
  display: block;
}

.flimsyslider .caption {
  padding: 15px;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
}

4. Enable the image carousel.

$(function() {
  $('ul.flimsyslider').flimsyslider();            
});

5. Currently the plugin provides 2 basic options to customize the slide animations.

$(function() {
  $('ul.flimsyslider').flimsyslider({
  
  // animation speed
  speed: 1000,

  // animation duration time
  pause: 4000
  
  });            
});

---

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