Semantic Continuous Image Slider Plugin - Proper Slider
File Size: | 4.81 KB |
---|---|
Views Total: | 2563 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

The tiny jQuery Proper Slider plugin makes it easier to help developer create a semantic, SEO-friendly, auto-rotating slider (carousel) from a normal image list.
How to use it:
1. Load the necessary jquery-proper-slider.css
in your document or copy and paste the following CSS snippets into your existing site stylesheet.
.slides { position : relative; overflow : hidden; } .slides ul { position : absolute; top : 0; left : 0; } .slides li { float : left; } .slides li > img { width: 100%; }
2. Add your images to an HTML unordered list with the CSS class of '.slides'.
<div id="example" class="slides"> <ul> <li><img src="1.jpg" /></li> <li><img src="2.jpg" /></li> <li><img src="3.jpg" /></li> <li><img src="4.jpg" /></li> <li><img src="5.jpg" /></li> </ul> </div>
3. Load jQuery library and the Proper Slider's script at the end of the document.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/js/jquery-proper-slider.js"></script>
4. Attach the function properSlider()
to the top container and done.
$(function() { var mySlider = $('#example'); mySlider.properSlider(); });
5. Specify the width/height of the slider.
$(function() { var mySlider = $('#example'); mySlider.properSlider({ width : 400, height : 300 }); });
6. Enable the auto-slide (autoplay) functionality.
$(function() { var mySlider = $('#example'); mySlider.properSlider({ auto_slide: true, auto_slide_delay : 2000 }); });
7. Create custom navigation buttons to manually slide between these images by click.
<a id="prev" href="#">Prev</a> <a id="next" href="#">Next</a>
$('#next').click(function() { mySlider.properSlider('slide', 'next'); return false; }); $('#prev').click(function() { mySlider.properSlider('slide', 'prev'); return false; });
This awesome jQuery plugin is developed by sasidhar. For more Advanced Usages, please check the demo page or visit the official website.