Responsive Infinite Loop Slider with jQuery - SimpleSlide

File Size: 1.38MB
Views Total: 19652
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive Infinite Loop Slider with jQuery - SimpleSlide

Yet another lightweight jQuery slider plugin for creating a responsive carousel with infinite loop support.

Features:

  • Supports different image size at same container.
  • Next/prev buttons & arrows navigation.
  • If sliding position is at last position, the next slide will slide to first position at next time.
  • Auto sliding supported.

Basic Usage:

1. Load the jQuery javascript and jQuery simpleslide plugin's files on the page.

<link rel="stylesheet" href="stylesheets/simpleslide.css" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="javascript/simpleslide.js"></script> 

2. Wrap the Html elements (e.g. Images) in an DIV container.

<div id="demo">
<div class="list">
<div><img src="images/img01.jpg"></div>
<div><img src="images/img02.jpg"></div>
<div><img src="images/img03.jpg"></div>
...
</div>
</div>

3. Call the plugin with default settings.

<script>
$('#demo').simpleSlide()
</script>

4. Available settings.

<script>
$('#demo').simpleSlide({
column: 1, // Amount for items showing in window at once.
slidingTime: 1000, // How long for sliding an item.(ms)
showButtonForever: false, // If true, next/prev button will never hide at first/last position.
cycle: false, // If true and if sliding position is at last position, the next slide will slide to first position at next time. If sliding position is at first position, the prev slide will slide to last position. 
autoSliding: 0 // If greater than 0, sliding automatically and it is millisecond for sliding. 
})
</script>

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