Bir jQuery resmi kaydırıcısı oluşturma Son görüntüde durma ve sonraki ve önceki düğmeleri ekleme

Question

Her bir LI'den geçen aşağıdaki örneklere sahibim ve görüntüyü duraklatırsanız, mouseout görüntüyü duraklatır ve bu devam ettiğim sürece devam eder .

Son LI'ye geldiğinde durmasını ve aynı zamanda "sonraki" ve "prev" sınıflarını eklediğim 2 bağlantıyı da yapmak istiyorum. Tabii ki ilk görüntüde, önceden gizlenmiş gibi bir sınıfa ayarlanmışsa ve son görüntüde gizli olarak bir sonraki tuşa basıldığında bu yüzden kullanılamaz, ancak bu benim sahip olduğum kadardır.

$(function() { 
 
    var timer; 
 
     lis = $(".productImage"); 
 
    
 
    function showNext() {  
 
    var active = lis.filter(".active").removeClass("active"); 
 
    var next = active.next(); 
 
    if (next.length===0) { 
 
     next = lis.eq(0); 
 
    } 
 
    next.addClass("active");  
 
    } 
 
    
 
    function showPrev() {  
 
    var active = lis.filter(".active").removeClass("active"); 
 
    var prev = active.prev(); 
 
    if (prev.length===0) { 
 
     prev = lis.eq(0); 
 
    } 
 
    prev.addClass("active");  
 
    } 
 

 
    function playGallery() { 
 
    stopGallery(); 
 
    timer = window.setInterval(showNext, 2500); 
 
    } 
 

 
    function stopGallery() { 
 
    if (timer) window.clearTimeout(timer); 
 
    } 
 
    
 
    // move to next image 
 
    $('.galleryNext').on('click', function(event){ 
 
    stopGallery(); 
 
    showNext(); 
 
    }); 
 

 
    // move to previous image 
 
    $('.galleryPrev').on('click', function(event){ 
 
    stopGallery(); 
 
    showPrev(); 
 
    }); 
 
    
 
    // reset slider timer if thumbnail changed 
 
    $('.thumbnail-list li a').on('click', function(event){ 
 
    stopGallery(); 
 
    playGallery(); 
 
    }); 
 
    
 
    // pause image slider if mouse is hovering gallery main image 
 
    $(".featured-image-list") 
 
    .on("mouseleave", playGallery) 
 
    .on("mouseenter", stopGallery); 
 

 
    playGallery(); 
 
    
 
});

.productImage { 
 
    display : none; 
 
} 
 

 
.productImage.active { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul class="featured-image-list"> 
 
    <li class="productImage active">1</li> 
 
    <li class="productImage">2</li> 
 
    <li class="productImage">3</li> 
 
    <li class="productImage">4</li> 
 
    <li class="productImage">5</li> 
 
</ul> 
 
<a class="galleryPrev">prev</a> 
 
<a class="galleryNext">next</a>

Answer 1

kodunuzu bu ile geldim minimum düzeyde modifiye: JSFIDDLE

Basitçe yerleştirerek fonksiyonları içinde showNext() ve showPrev() Aşağıda, otomatik olarak ilerlemenin slaytlarını durdurduğu uyarısı ile çalışan bir sonraki ve önceki düğmeler olur (ve düzenleme düzeninizde görüyorum ne yaptınız):

function nextImage() { 
    stopGallery(); 
    showNext(); 
} 

function prevImage() { 
    stopGallery(); 
    showPrev(); 
} 

Bunun için bir çözüm bulmak için size bırakacağım.

Ve ayrıca aşağıdaki eklenmesiyle birlikte showNext ve showPrev çalışacağını düzenleyebilir: Ben önümüzdeki ve hemen engelliler clcked

// add to showNext() 
if (next.next().length===0) { 
    stopGallery(); 
    nextBtn.addClass("hidden"); 
} 

// add to showPrev() 
if (prev.prev().length===0) { 
    prevBtn.addClass("hidden"); 
}