-1

Continuous JavaScript Scroller

I have below script which is working on next and previous click. There are about 1 to 3 div for which I have added this JavaScript to flow from left to right and vice versa upon the next and previous button action.

I want to make it continuous scrolling. After third div scroller should again navigate to first div. It should not go in a reverse direction. Flow should be continuous again and again.

Please advise on the solution to achieve this.

<div id="mainContainer"> 
<!--mainContainer Div Start-->
<div class="arrowRight"><img src="images/arrow_left.png" width="36" height="39"></div> 
<div class="arrowLeft"><img src="images/arrow_right_disable.png" width="36" height="39">   </div>
  <div class="slider">
    <div class="slides"> <img src="images/1.jpg" width="250" height="250"></div>
    <div class="slides"> <img src="images/2.jpg" width="250" height="250"></div>
    <div class="slides"><img src="images/3.jpg" width="250" height="250"> </div>
  </div>
  <!--mainContainer Div End--> 
</div>

js

window.onload=init;

function init(){
    
var arrowLeft=document.querySelector('.arrowLeft');     
var arrowRight=document.querySelector('.arrowRight');       
arrowRight.addEventListener('click',slideRight,false);
arrowLeft.addEventListener('click',slideLeft,false);

  var flag=1;
  function slideRight(){
    if(flag<3){ 
    flag++; 
    arrowLeft_div.innerHTML="<img src='images/arrow_right.png' width='36' height='39'>";    
    var slider=document.querySelector('.slider');
    slider.style.webkitTransform+='translate(-1024px, 0px)';
   }
    if(flag==3){
    arrowRight_div.innerHTML="<img src='images/arrow_left_disable.png' width='36'    
    height='39'>";  
   }
}


  function slideLeft(){
    if(flag>1){
    flag--; 
    arrowRight_div.innerHTML="<img src='images/arrow_left.png' width='36' height='39'>";    
    var slider=document.querySelector('.slider');
    slider.style.webkitTransform+='translate(1024px, 0px)';
   }
   if(flag==1){
   arrowLeft_div.innerHTML="<img src='images/arrow_right_disable.png' width='36'  
   height='39'>";   
    
  }
 }

}
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
user504023
  • 553
  • 1
  • 7
  • 12
  • What is your question exactly? – Pekka Dec 08 '10 at 15:14
  • I want to create continuous slider. Suppose, there are three div, one after another. When hitting on next, it will take to 2 second div, then another hit will take to third div. any click after this on next button, I should able to see 1st div again. Looping the three divs. Like 1,2 then 3 then 1, 2 then 3 repeated process. The above code work fine till I reached third div, after that I disabled the next click. But here I want to keep the next button active and want to show 1st div again upon the next click. It should look continuous processes. – user504023 Dec 08 '10 at 15:26
  • i just added html code as well, just to make every thing clear. Hope this will help. – user504023 Dec 08 '10 at 15:29
  • please note, code is developed specifically for Ipad. – user504023 Dec 08 '10 at 15:31
  • @user - How long is the duration of the animation? – user113716 Dec 08 '10 at 15:36
  • i controlling duration from webkit css. duration is one sec here is the code for reference. .slider{width:3072px; height:768px; float:left; position:absolute; left:0px; top:0px; -webkit-transition:all 1.0s ease-in-out; } – user504023 Dec 08 '10 at 15:48
  • @user - It would be very helpful if you would create a working example using [jsFiddle](http://jsfiddle.net/). – user113716 Dec 08 '10 at 15:57
  • actually it is very wonderful, but with jquery i am getting some problem in ipad and iphone. That why dont want to use frame works. It would be great if i could do this with out framework – user504023 Dec 08 '10 at 16:03
  • @user - I'm not talking about using a framework. I mean use jsFiddle to create a working example of your code that we can test. At jsFiddle, you can use the menus on the left to select "No Library" mode. Then create a working example of the code you have so far, click "Save" at the top, and post the link here. – user113716 Dec 08 '10 at 16:29
  • please find the url. Thanks a lot for the support http://jsfiddle.net/q9MDx/ – user504023 Dec 08 '10 at 16:53
  • this will specifically run on webkit browser. Chrome and safari. – user504023 Dec 08 '10 at 16:54

1 Answers1

2

Something like this?

var flag=1;
function slideRight(){
    if(flag<3){ 
    flag++; 
    arrowLeft_div.innerHTML="<img src='images/arrow_right.png' width='36' height='39'>";    
    var slider=document.querySelector('.slider');
    slider.style.webkitTransform+='translate(-1024px, 0px)';
}
    if(flag==3){
    arrowLeft_div.innerHTML="<img src='images/arrow_right.png' width='36' height='39'>";    
    var slider=document.querySelector('.slider');
    slider.style.webkitTransform+='translate(2048px, 0px)'; 
    flag = 1;
}
punkrockbuddyholly
  • 9,675
  • 7
  • 36
  • 69