Question

This may seem like a very basic question, since I’m not familiar with jQuery, but I’m having some trouble with implementing the jquery cycle plugin. I have found the code for the previous/next off the Jquery Cycle Plugin page: jQuery Cycle Plugin – Intermediate Demos (Part 2) (Previous/Next example)

So far I have this
Js Fiddle as a test

This is the jQuery of the animation effects that I would like:

$(document).ready(function() {
  $('#s2').cycle({ 
   fx:     'slideY', 
   speed:   300, 
   timeout: 0, 
   next:   '#next2', 
   prev:   '#prev2' 
  });
});

I have the buttons in place, along with some test images, but I’m having trouble getting the animation from the button to work.

I have read the documentation of the cycle options, but since I’m not too familiar with jQuery I don’t understand how to get it to work, I have the fx and speed ready, just getting the buttons to work is my problem.

Answer 1

Use the <a> tag for the buttons. For example:

<a id="prev2" href="#">Prev</a>

Then use CSS to style it how you would like.

Make sure you include the cycle.js once after the jquery framework as follows:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>