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>
<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="">
<img src="YourImage.jpg" alt="">
Using the src attribute define the path to the image file.
Basic initialization:
- $('#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').