Semantic Continuous Image Slider Plugin - Proper Slider

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.