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:

  1. <div id="YourSlideshowID">
  2.     <img src="YourImage.jpg" alt="">
  3.     <img src="YourImage.jpg" alt="">
  4.     <img src="YourImage.jpg" alt="">
  5.     ...
  6. </div>

To add more images to the slider duplicate the following code:

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

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

Basic initialization:

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

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