kitesurfing

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:

copytextpop-up

<div id="YourSlideshowID">
    <img src="YourImage.jpg" alt="">
    <img src="YourImage.jpg" alt="">
    <img src="YourImage.jpg" alt="">
    ...
</div>

<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:

copytextpop-up

<img src="YourImage.jpg" alt="">

<img src="YourImage.jpg" alt="">

Using the src attribute define the path to the image file.

Basic initialization:

copytextpop-up

$('#YourSlideshowID').cycle({ fx:'TheEffectYouChoosed'});

$('#YourSlideshowID').cycle({ fx:'TheEffectYouChoosed'});

To initialize the slider input the slider block ID($('#YourSlideshowID')) and animation effect you want to use (fx:'TheEffectYouChoosed').