Minimal Automatic Image Slider Plugin With jQuery - jImgSlider

File Size: 15.4 KB
Views Total: 1219
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal Automatic Image Slider Plugin With jQuery - jImgSlider

jImgSlider is a simple, fast, automatic, cross-browser image slider/carousel plugin that has the ability to resize and center the inner images depending on the size of their parent container.

How to use it:

1. Download and include the jQuery jImgSlider's stylesheet in the head section of the html page.

<link rel="stylesheet" href="css/jImgSlider.css">

2. Add a group of images wrapped in DIV elements into the slider.

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

3. Include the jQuery jImgSlider's JavaScript after loading jQuery library when needed.

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

4. Initialize the image slider.

$("#demo").jImgSlider();

5. Make the image slider centered in the webpage.

#demo {
  background-color: #a5caa5;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

6. Specify the height/width of the image slider.

$("#demo").jImgSlider({
  'width':600,
  'height':450
});

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