Unique Continuous JavaScript Scroller
I am currently working on a JavaScript scroller script that enables left to right and right to left scrolling on the click of next and previous buttons. The script is designed to work with 1 to 3 div elements in a continuous flow. However, my goal is to achieve continuous scrolling behavior where the scroller seamlessly moves from the last div back to the first one without reversing the direction.
I am seeking advice on how to modify the script to accomplish this continuous scrolling effect.
<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'>";
}
}
}