Home Autoplay Javascript carousel until button click
Reply: 0

Autoplay Javascript carousel until button click

user2558
1#
user2558 Published in July 16, 2018, 6:31 am

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)

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.315211 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO