Responsive jQuery Horizontal Image Scroller Plugin - imageSlider

File Size: 5.09 KB
Views Total: 26893
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


  • 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=""></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>

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.

$(function() {
slideItems: '.my-slider-item',
slideContainer: '.my-slider-list',
slideDistance: 5,
slideDuratin: 800,
resizable: true,
pause: true

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.