Javascript Onclick

Question

I want to achieve a very simple effect to scroll divs when pressing an arrow button ... How do i do this?

Basically i have a maximum of 4 divs named:

Slideframe, slideframe1, slideframe2 and slideframe3

I have a PHP variable called count which generates the slideframe content based on a PHP loop which increments a variable called $count.

Therefore the count variable can be between 0 and 3.

I want buttons to scroll divs left and right based on the count variable If the count variable is 0 then no scroll buttons would appear. If the count variable is 1 or 2 then both left and right scroll buttons would be visible and woudl scroll the relevant divs. lastly if count = 3 then only a left arrow would be visible.

this is the javascript i use (in conjunction with jqmin liibary) to move the divs:

$(document).ready(function(){ 

 $("#one").click (function(){
          if (navi =1){
 $(".slideframe").animate({opacity: "0.1", left: "-=960"}, 1200);
 $(".slideframe1").animate({ left: "-=960"}, 1200);
  }
 }); 
});

"#one" = the id of the left arrow image.

Whats the simplest way of doing all of this?

thx

Answer 1

There are plenty of existing slider plugins and tutorials for jQuery. I suggest you check out:

13 Super Useful jQuery Content Slider Scripts and Tutorials

25 jQuery Image Gallery/Slider Tutorials and Plugins