Basic Automatic Image Slider/Carousel Plugin with jQuery - Flimsy Slider
File Size: | 4.03 KB |
---|---|
Views Total: | 1617 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.