javascript slide slick_accessible_slideshow

Question

i have three div's in an HTML page. the page look like this

HTML Page:

   leftArrow(>)   div   rightArrow(<)

i need to move the div from left to right and right to left. using javascript and DHTMl

or JQuery.

Is it Possible to Move in that direction ?

Answer 1

Yes it's possible, i've done it in the past without using jQuery.

I have a the following markup:

<div id="HorThumbs" style="overflow:hidden;width:500px">
  <div id="HorScroller" style="width:1000px">
    //Data to be shown
  </div>
</div>

var scrollStep=1;
var timerLeft,timerRight="";
function scrollDivLeft(id){
  clearTimeout(timerRight);
  document.getElementById(id).scrollLeft-=scrollStep;
  timerRight=setTimeout("scrollDivLeft('"+id+"')",1);
}

function scrollRight(id){
  clearTimeout(timerLeft);
  document.getElementById(id).scrollLeft+=scrollStep;
  timerLeft=setTimeout("scrollRight('"+id+"')",1);
}

Then add a MouseOver event to your left and right arrows, passing in 'HorThumbs' as the Id to either scrollDivLeft or scrollDivRight function.

Answer 2

Take a look at the jQuery cycle plugin. It will scroll left/right and allows prev/next buttons.