jQuery Plugin For Automatic Background Slideshow with Image Zoom Effect - zoomslider

zoomslider is a jQuery plugin that creates a responsive, full width, automatic slideshow from an array of background images, with a subtle image zoom effect based on CSS3 transforms.

How to use it:

1. Include the necessary jQuery library and modernizr.js in your Html page.

<script src="js/modernizr-2.6.2.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

2. Include the jQuery zoomslider plugin after jQuery library.

<link href="dist/zoomslider.css" rel="stylesheet">
<script src="dist/jquery.zoomslider.min.js"></script>

3. Add an array of images into a DIV element using data-zs-src attribute as follow.

<div id="demo" data-zs-src='["1.jpg", "2.jpg", "3.jpg"]'>
  <p>Sample inner content</p>
</div>

4. Done. All the parameters can be passed via data-zs-* attributes.

// an array of images
data-zs-src: []

// animation speed
data-zs-speed: 8000

// switch speed
data-zs-switchSpeed: 800

// autoplay interval
data-zs-interval: 4500

// autoplay
data-zs-autoplay: true

// bullets navigation
data-zs-bullets: true

// false, 'plain', 'dots'
data-zs-overlay: 'plain'	

Change log:

2015-06-01

• auto z-index

---

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