Functional Slider
Choose an effect
- blindX
- blindY
- blindZ
- cover
- curtainX
- curtainY
- fade
- fadeZoom
- growX
- growY
- none
- scrollUp
- scrollDown
- scrollLeft
- scrollRight
- scrollHorz
- scrollVert
- shuffle
- slideX
- slideY
- toss
- turnUp
- turnDown
- turnLeft
- turnRight
- uncover
- wipe
- zoom
Toggle the sync option to see how some effects behave differently (such as blind, curtain, and zoom).
sync: true
Slideshow with default effect
- Description
-
To make the slider work jquery.cycle.all.min.js file is used
The HTML Slideshow Structure:
<div id="YourSlideshowID"> <img src="YourImage.jpg" alt=""> <img src="YourImage.jpg" alt=""> <img src="YourImage.jpg" alt=""> ... </div>
To add more images to the slider duplicate the following code:
<img src="YourImage.jpg" alt="">
Using the src attribute define the path to the image file.
Basic initialization:
$('#YourSlideshowID').cycle({ fx:'TheEffectYouChoosed'});To initialize the slider input the slider block ID($('#YourSlideshowID')) and animation effect you want to use (fx:'TheEffectYouChoosed').