Responsive jQuery Slider with Smooth Zoom and Pan Animations - Smoothslides
File Size: | 684 KB |
---|---|
Views Total: | 37541 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.