jQuery Slideshow Plugin with Image Auto Resize and Easing Support - imgSlider

Yet another jQuery plugin for creating a simple image slideshow that has the ability to automatically resize images to fit within the slideshow container. The plugin requires JQuery UI for awesome easing effects.

How to use it:

1. Include the latest jQuery library and jQuery UI on your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

2. Include the jQuery imgSlider plugin after jQuery library.

<script src="jquery.imgslider.js"></script>

3. Insert a group of images into your webpage, using alt attribute for image captions.

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

4. Call the plugin with default settings.

<script>
$(document).ready(function () {
$("#demo").imgSlider();
});
</script>

5. Optional settings to custom and create you own image slideshow.

<script>
$(document).ready(function () {
$("#demo").imgSlider({
width: 500,
height: 250,
startAt: 0,
delay: 8000,
duration: 2500,
cols: 1,
rows: 1,
nextEffect: "",
prevEffect: "",
easing: "",
caption: {
font: "sans-serif",
color: "white",
bgColor: "black",
opacity: 0.65
},
backgroundColor: "transparent",
buttons: {
next: "&raquo;",
prev: "&laquo;"
},
resizeImages: false,
imgCropX: 50,
imgCropY: 50,
showCaption: true,
showButtons: true
});
});
</script>

---

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