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

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').