#Smoothslides A responsive jQuery slideshow with beautiful panning effects on each image. Created by Kevin Thornbloom ##Demo Demo Page ##Usage ###Include CSS in header
<link rel="stylesheet" href="css/smoothslides.theme.css">
###Include JS in footer (after loading jQuery)
<script type="text/javascript" src="js/smoothslides.min.js"></script>
<script type="text/javascript">
$(window).load( function() {
$(document).smoothSlides({
duration: 4000
/* options seperated by commas */
});
});
</script>
###Add HTML Markup for slides
<div class="ss-slides">
<div class="ss-slide">
<img src="images/1.jpg" />
</div>
<div class="ss-slide" title="Caption">
<img src="images/2.jpg" />
</div>
</div>
Note- to add a caption, put a title on that slide's div.
##Options
Option | Description | Values |
duration | Time in milliseconds (1 second = 1000 ms) each slide is visible for | 3000 |
autoPlay | Allow slideshow to play automatically | 'true' or 'false' |
order | How to order the slides | 'normal' , 'reverse' or 'random' |
effect | Animation to be used while automatically playing | 'random', 'zoomIn', 'zoomOut', 'panLeft', 'panRight', 'panUp', 'panDown', 'crossFade','none' |
effectEasing | CSS3 easing type for animations | 'ease-in-out' |
nextText | Text for the next button | '›' |
prevText | Text for the previous button | '‹' |
captions | Show captions? | 'true' or 'false' |
navigation | Show Next/Prev buttons? | 'true' or 'false' |
pagination | Show dots representing slides? | 'true' or 'false' |
##Licensing Free to use and modify personally or commercially. Not for resale.
##Help & Feedback Connect with me on twitter.