Responsive jQuery Slider with Smooth Zoom and Pan Animations - Smoothslides

Smoothslides is an easy jQuery slider plugin for creating a responsive slider with smooth image zoom & pan animations based on CSS3 transitions and transforms.

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

How to use it:

1. Include the required jQuery smoothslides plugin stylesheet in the head section.

<link rel="stylesheet" href="css/smoothslides.css">

2. Markup html structure for the slider. Using title attribute to add image captions.

<div class="ss-slides">
<div class="ss-slide" title="Caption 1"> <img src="images/1.jpg" /> </div>
<div class="ss-slide" title="Caption 2"> <img src="images/2.jpg" /> </div>
<div class="ss-slide" title="Caption 3"> <img src="images/3.jpg" /> </div>
<div class="ss-slide" title="Caption 4"> <img src="images/4.jpg" /> </div>
</div>

3. Load the jQuery javascript library and jQuery smoothslides plugin on the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/smoothslides.js"></script>

4. Call the plugin with default options.

$(window).load( function() {
$(document).smoothSlides({

// Length of time in milliseconds for the effect
effectDuration: 5000,

// Length of time in milliseconds for the fade between slides
transitionDuration: 500,

// Modifies the strength of the Ken Burns effect (amount of zoom, pan, etc)
// Positive numbers where 1 = no change, 2 = 100% change from original.
effectModifier: 1.3,

// Sorting order of images
// 'random' or 'normal'
order: 'normal',

// Allow slideshow to play automatically
autoPlay: 'true',

// Type of panning effect used.
// 'crossFade' 'zoomOut' zoomIn' 'panUp' 'panDown' 'panLeft' 'panRight' 'diagTopLeftToBottomRight' 'diagTopRightToBottomLeft' 'diagBottomRightToTopLeft' 'diagBottomLeftToTopRight' 
effect: 'zoomOut,zoomIn,panUp,panDown,panLeft,panRight,diagTopLeftToBottomRight,diagTopRightToBottomLeft,diagBottomRightToTopLeft,diagBottomLeftToTopRight',

// CSS3 easing type for animations
// 'ease' 'ease-in' 'ease-out' 'ease-in-out' 'linear'
effectEasing: 'ease-in-out',

// Text appearing in the next button
nextText: ' ►',

// Text appearing in the prev button
prevText: '◄ ',

// Show captions
captions: 'true',

// Show Next/Prev buttons
navigation: 'true',

// Show dots representing slides
pagination: 'true',

// True sets a maximum width based on your image sizes. 
// False allows width to be greater than image size, scaling up the images.
matchImageSize: 'true'

});
});

Change logs:

v2.2.1 (2015-10-21)

• Fix effect modifier

v2.2.0 (2015-09-19)

• New option - order
• New option - effectModifier
• Ability to set certain effects on certain images

v2.1.0 (2015-06-29)

• New option - matchImageSize
• Adding limited support for IE8

2015-05-27

• Update smoothslides.js

2014-05-27

• Add autoplay option + update option names

2014-01-05

• Enhancements

2014-01-03

• Fixed for Firefox.

2013-12-19

• Adding pagination

2013-12-14

• Major update to include options

 

---

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