Hinzufügen von Pause, nächste und vorherige Schaltflächen zu jquery Slider mit Fortschrittsbalken

Question

Ich fand this simple slider mit einem Fortschrittsbalken. Es funktioniert gut, aber ich möchte nächste, vorherige und Pause-Tasten hinzufügen. Kann jemand helfen?

JS

bar = $('.progress_bar'); 
time = 3000; 

function run(){ 
    bar.width(0); 
    bar.fadeIn(500,function(){ 
     bar.animate({'width': "100%"}, time).fadeOut(500,function(){ 
      change();run(); 
     }); 
    }); 
} 
$("#slideshow > li:gt(0)").hide(); 


var change = function() { 
    $('#slideshow > li:first') 
    .fadeOut(1000) 
    .next() 
    .fadeIn(1000) 
    .end() 
    .appendTo('#slideshow'); 
}; 

run(); 

Answer 1

machte ich ein codepen.io Beispiel, das die Pause-Adressen und weiterhin Funktionalität, die ich denke, der anspruchsvollere Teil ist. Für die nächste, würden Sie einfach ein Click-Ereignis haben, die die Änderung() Funktion in Ihrem ursprünglichen Beispiel ausführen würde: http://codepen.io/KAPastor/pen/ezdQPd

<button id="run">RUN</button> 
<button id="pause">PAUSE</button> 
<button id="continue">CONTINUE</button> 

<div class="progress_bar"></div> 

CSS

div.progress_bar { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    background: #6cecc6; 
    height: 5px; 
    width: 0; 
    opacity: 1; 
    z-index: 1002; 
    width: 100%; 
    } 

JS:

$(document).ready(function(){ 

    $('#run').click(function(){ 
    $('.progress_bar').width(0); 
    $('.progress_bar').fadeIn(500,function(){ 
     $('.progress_bar').animate({'width': "100%"}, 3000) 
    }); 
    }); 

    $('#pause').click(function(){ 
     $('.progress_bar').clearQueue(); 
    $('.progress_bar').stop(); 

    }); 

    $('#continue').click(function(){ 
$('.progress_bar').fadeIn(500,function(){ 
     $('.progress_bar').animate({'width': "100%"}, 3000) 
    }); 
    }); 



}) 

I Ich weiß, es ist eine vereinfachte Lösung, aber ich denke, es wird hilfreich sein! Lassen Sie mich wissen, wenn Sie weitere Fragen haben. -K