純粋なjavascriptカルーセルのバグ

Question

マイナーなカスタマイズでチュートリアルhereの後に純粋なjavascriptスライダーを作成しようとしています。

私が問題にしていたのは、7つ以上のスライドを追加すると、7番目以降が正しく表示されないことです。選択した画像の代わりに濃いグレーの画面のみが表示されます。

私は何時間もデバッグを試みましたが、それはまだ分かりません。うまくいけば、この問題についていくつかの専門家が光を当てることができます。

コードの作者によるJSFIddle：https://jsfiddle.net/solodev/yokph2nh/

コードのスニペット：ここ

function changeSlides(instant) { 
    if (!instant) { 
     animating = true; 
     manageControls(); 
     $slider.addClass("animating"); 
     $('#slide-content').addClass("animating"); 
     $slider.css("top"); 
     $(".slide").removeClass("active"); 
     $(".slide-" + curSlide).addClass("active"); 

     setTimeout(function() { 
      $slider.removeClass("animating"); 
      $('#slide-content').removeClass("animating"); 
      // Update content 
      let currentContent = $(".slide-" + curSlide + " .slide__content").html(); 
      $('#slide-content').html(currentContent); 

      animating = false; 
     }, animTime); 
    } 
    window.clearTimeout(autoSlideTimeout); 
    $(".slider-pagi__elem").removeClass("active"); 
    $(".slider-pagi__elem-" + curSlide).addClass("active"); 
    $(".slider-tab__elem").removeClass("active"); 
    $(".slider-tab__elem-" + curSlide).addClass("active"); 
    $slider.css("transform", "translate3d(" + -curSlide * 100 + "%,0,0)"); 
    $slideBGs.css("transform", "translate3d(" + curSlide * 50 + "%,0,0)"); 
    diff = 0; 
    autoSlide(); 
} 

Answer 1

は、あなたがより多くの画像と、掲載1の変更されたバイオリンです。 https://jsfiddle.net/5xhtq4hL/

問題なく動作するようです。

.slide:nthchild()セレクタの左側のCSS値を更新していない可能性がありますか？

このコードは非常にDRYではありません。そんなに貼り付けコピー。