Autoplay Javascript Karussell bis zum Klicken klicken

Question

So habe ich ein ordentliches kleines Karussell, das funktioniert, indem Sie auf einen Pfeil nach links oder rechts klicken.

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> 

ich für das Karussell möchte den ganzen Weg durch einmal automatisch abgespielt, bis sie das Ende oder jemand Klicks erreicht einen Pfeil . Irgendwelche Vorschläge für den besten Weg, dies zu tun? (Ich verwende GSAP, um die tatsächliche Bewegung zu behandeln)

Answer 1

Versuchen Sie, einen Teil Ihres Codes zu verwenden, der Übergang als Modul behandelt, um es einfacher zu machen, sie anzurufen/zu verwenden.

Bitte beachten Sie: Ich habe es nicht getestet, aber es wird Ihnen eine Vorstellung davon geben, wie Karussell als Autoplay funktionieren sollte und wie Sie es stoppen können. (Sie können auch Rest des Codes hinzufügen, das nur über Teile, die neu sind oder aktualisiert.)

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);