# jQuery . zoomSlider

ZoomSlider creates slideshows with zoom effect using background-image and CSS3.

jQuery.zoomSlider v0.2.3 / by Ming Yeung / http://www.mingthings.com

### Dependencies:

- jQuery: 1.10.2+
- Modernizr: 2.6.2+ (for css3 transform support detection. May impliment custom script to remove this depencency in future)

To initialise zoomslider, add the attribute data-zs-src to a DOM element and the slider would auto-initialize.

`<head>
<link rel="stylesheet" type="text/css" href="css/zoomslider.css" />
<script type="text/javascript" src="js/modernizr-2.6.2.min.js"></script>
</head>
<body>
...
<div data-zs-src='["img1.jpg", "img2.jpg", "img3.jpg"]'>
<p>Sample inner content</p>
</div>
...
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.zoomslider.min.js"></script>
</body>`

All configurable properties:

Data attribute | Default value | Possible values
--- | --- | ---
data-zs-src | null | []
data-zs-speed | 8000 | Number (milliseconds)
data-zs-switchSpeed | 800 | Number (milliseconds)
data-zs-interval | 4500 | Number (milliseconds)
data-zs-autoplay | true | true / false
data-zs-bullets | true | true / false
data-zs-overlay | 'plain' | false, 'plain', 'dots'