Responsive jQuery Full Width Image Slider Plugin - responsiveSlides

responsiveSlides is a lightweight, responsive and full width image slider/slideshow plugin for jQuery that has the ability to resize the images with fixed height as big as possible to fit within their parent container.

View more:

• Top 50 Best Carousel jQuery Plugins

Basic Usage:

1. Load the jQuery javascript library and jQuery responsiveSlides plugin in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.responsiveSlides.js"></script>

2. Load the required jQuery onImagesLoaded plugin for callback functions when all images have loaded on the entire page.

<script type="text/javascript" src="jquery.onImagesLoad.min.js"></script>

3. Wrap the images in a container.

<div id="demo">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>

4. Call the plugin with useful options.

<script language="javascript">

var p=$('#demo').responsiveSlides({

// list of images url if the container is empty
img:[
"1.jpg",
"2.jpg",
"3.jpg"
],

height:450, // slides conteiner height
background:'#FFF', // background color and color of overlayer to fadeout on init
autoStart:true, // boolean autostart
startDelay:0, // start whit delay
effectInterval:5000, // time to swap photo
effectTransition:1000, // time effect
pagination:[
{
active:true, // activate pagination
inner:true, // pagination inside or aouside slides conteiner
position:'B_C', // pagination align:
// T_L = top left
// T_C = top center
// T_R = top right
// B_L = bottom left
// B_C = bottom center
// B_R = bottom right
margin:10, // pagination margin
dotStyle:'', // dot pagination class style
dotStyleHover:'', // dot pagination class hover style
dotStyleDisable:''// dot pagination class disable style
}]
 
});
</script>

---

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