Autoplay Javascript carousel until button click

Question

So I have a tidy little carousel that functions by clicking a left or right arrow.

Javascript:

unitWidth = 760;
unitTotal = 4;
unitCtr = 1;

onLeftArrow = function(e) {
    //alert("Left");
    disableArrows();
    if (unitCtr<=unitTotal) {
        unitCtr++;
        TweenLite.to(productImg, 0.6, {x: "-="+unitWidth, onComplete:enableArrows });
    }
    hideArrows();
}

onRightArrow = function(e) {
    //alert("Right");
    disableArrows();
    if (unitCtr>1) {
        unitCtr--;
        TweenLite.to(productImg, 0.6, {x: "+="+unitWidth, onComplete:enableArrows });
    }
    hideArrows();
}

function hideArrows() {
    //alert(unitCtr)
    if (unitCtr <= 1) {
        arrowRight.style.visibility = "hidden";
        arrowLeft.style.visibility = "visible";
    }
    if (unitCtr >= unitTotal) {
        arrowRight.style.visibility = "visible";
        arrowLeft.style.visibility = "hidden";
    }
    if (unitCtr>1 && unitCtr<unitTotal) {
        arrowRight.style.visibility = "visible";
        arrowLeft.style.visibility = "visible";
    }
}

function disableArrows() { //ADDED NEW FUNCTION TO DISABLE ARROWS
    arrowLeft.removeEventListener('click', onLeftArrow, false);
    arrowRight.removeEventListener('click', onRightArrow, false);
}

function enableArrows() { //ADDED NEW FUNCTION TO RE-ENABLE ARROWS
    arrowLeft.addEventListener('click', onLeftArrow, false);
    arrowRight.addEventListener('click', onRightArrow, false);
}

HTML:

<div id="arrowL">
    <img src="arrow_click.png" width="100" height="415" />
</div>

<div id="arrowR">
    <img src="arrow_click.png" width="100" height="415" />
</div>

<div id="product_img">
    <div class="img_container" id="product1">
        <img src="panel1.jpg" class="product" />
    </div>
    <div class="img_container" id="product2">
        <img src="panel2.jpg" class="product" />
    </div>
    <div class="img_container" id="product3">
        <img src="panel3.jpg" class="product" />
    </div>
    <div class="img_container" id="product4">
        <img src="panel4.jpg" class="product" />
    </div>
</div>

I'd like for the carousel to autoplay all the way through once, until it reaches the end or someone clicks an arrow. Any suggestions for the best way to do this? (i'm using GSAP to handle the actual motion)

Answer 1

Try to use part of your code that will handle transition as module to make it easier to call/use them.

Please Note: I didn't test it but it will give you idea about how carousel should work as autoplay and how you be able to stop it. (You can add rest of your code too, this is just about parts that are new or updated.)

javascript:

var unitWidth = 760,
    unitTotal = 4,
    unitCtr = 1,
    interval;

onLeftArrow = function(e) {
    disableArrows();
    transition_forward();
    hideArrows();
}

function transition_forward(){
    if (unitCtr<=unitTotal) {
        unitCtr++;
        TweenLite.to(productImg, 0.6, {x: "-="+unitWidth, onComplete:enableArrows });
    }
}

function auto_play(){
    interval = setInterval(function(){
        transition_forward();
    }, 2500);
}

auto_play();

clearIV = function(){
    clearInterVal(interval );
}

arrowLeft.addEventListener('click', clearIV, false);
arrowRight.addEventListener('click', clearIV, false);