Responsive jQuery Horizontal Image Scroller Plugin - imageSlider

imageSlider is a jQuery plugin used to automatically and horizontally scroll through a set of images like the abandoned marquee tag.

Features:

• Responsive design to fit any devices.
• Some useful options to customize the image scroller.
• Supports reverse sliding direction.
• Pause auto-scroll on mouse over.

How to use it:

1. Load the jQuery imageSlider plugin after the jQuery library.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.imageslider.js"></script>

2. Create the markup for an image scroller.

<div class="my-slider de">
<ul class="my-slider-list">
<li class="my-slider-item"><img src="1.jpg" width="900" alt=""></li>
<li class="my-slider-item"><img src="2.jpg" width="900" alt=""></li>
<li class="my-slider-item"><img src="3.jpg" width="900" alt=""></li>
...
</ul>

3. Sample CSS to style the image scroller.

.my-slider {
height: 450px;
margin: 0 auto;
width: 100%;
}
.my-slider ul {
height: 450px;
overflow: hidden;
}
.my-slider li {
float: left;
}

4. Call the plugin with options.

<script>
$(function() {
$('.demo').imageslider({
slideItems: '.my-slider-item',
slideContainer: '.my-slider-list',
slideDistance: 5,
slideDuratin: 800,
resizable: true,
pause: true
});
});
</script>

5. Available options & defaults.

slideItems: '.is-item',
slideContainer: '.is-container',
slideDistance: 1,
slideDuration: 1,
slideEasing: 'linear',
resizable: false,
reverse: false,
pause: false

---

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