🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A responsive, full width, automatic slideshow from an array of background images, with a subtle image zoom effect.

Image-Slider background-slideshow

Documentation

jquery-zoomslider


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

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.

<div data-zs-src='["img1.jpg", "img2.jpg", "img3.jpg"]'> 	<p>Sample inner content</p> </div> 

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'

You May Also Like