ZoomSlider creates slideshows with zoom effect using background-image and CSS3.
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' |