Smoothslides

A simple, lightweight, and responsive jQuery slideshow by Kevin Thornbloom that features Ken Burns type animations.

Features

• Lightweight [3.5Kb]
• Four Animation Types: Zoom In, Zoom Out, Pan Left, Pan Right
• Easily add captions
• CSS3 transitions for smoother effects
• Responsive image sizes (resize this page)

Usage

1. Include jQuery, smoothslides.js, andsmoothslides.css
2. Create a div with a class of "ss-slides". Create each slide within as a div called "ss-slide" and place your image inside. Images should be the same size.
3. Want a caption? Add a title attribute to your "ss-slide" div.

Customization

The slideshow will randomly pick animation effects as it plays. The timing of the slideshow is set in milliseconds via the playTimer variable within the javascript file. The styling of the slideshow can be changed by editing the kenburns.styles.css file.

Browser Support

• Full support: Chrome, Safari, Firefox (16+), Internet Explorer (9+)
• Supported without transitions: Internet Explorer 7-8, Firefox (-16)
• Unsupported: Internet Explorer 6

Download

Find me on Github