Infinityスライダの前のボタンのロジックが動作しない

Question

jQueryを使用して無限のスライダを作成しようとしています。 アクティブなスライドは画面の2/3になり、次のスライドは1/3になります。したがって、次のスライドのプレビューがすでに表示されています。

私が構築したスライダが動作しています。 nextをクリックすると、スライダが左にアニメートされます。

トリック

initの私は最後のスライドの後に最初の2枚のスライドを複製します。 slideIndexは、現在のインデックスに注目して、スライドの数から1を引いたもので、スライダをゼロにリセットします。あなたは無限のスライダーを持っています。私もあなたが最初のスライドにいると以前にクリックしたときに効果を適用したいとき

問題

問題が来ます。それは基本的に同じことをする必要がありますが、スライダを0にリセットするのではなく、スライドの最後に設定します。

var slider = $('.slider'); 
var slides = slider.find('.slides').children(); 
var slidesW = slides.width(); 

root.offset = -Math.abs((root.slideIndex * slides.eq(index).width())); 
console.log(root.offset); 

// Update active class 
slides.removeClass('active'); 
// slides.eq(index).addClass('active'); 

// Add class active 
TweenMax.to(slides.eq(index), 1, { 
    className: 'active', 
    onComplete: function() { 

     if (root.slideIndex >= (root.numOfSlides - 2)) { 

      slider.find('.slides').addClass('no-transition'); 

      slides.removeClass('active'); 
      slides.filter(':first').addClass('active'); 

      root.offset = 0; 

      TweenMax.set(slider.find('.slides'), { 
       x: root.offset, 
       onComplete: function() { 
        root.slideIndex = 0; 
        $('#footer .paging #indicator').find('span').html('01'); 

        return false; 
       } 
      }); 

     } 
    } 
}); 

// Remove no-transition class 
slider.find('.slides').removeClass('no-transition'); 

// Change position of ul.slides 
TweenMax.to(slider.find('.slides'), 0.4, { 
    x: root.offset 
}); 

私はif (root.slideIndex === (root.numOfSlides - 2)) {のif文を持っているので、常にslideIndexがroot.numOfSlides - 2に等しい場合、ゼロにリセットされます。したがって、あなたが前または次をクリックした場合、それは問題ではありません。slideIndexが私の例のスライド4にある場合、ゼロにリセットされます。

私はcodepenにスライダーを再作成：https://codepen.io/anon/pen/zEmozr

は今、何日か検索して試した後、この問題を解決する方法を知らない、誰かが私を助けることができます願っています。 何かが不明な点などがある場合は、教えてください。 ありがとうございます。

Answer 1

変更この行：

if (dir == "ss-prev") { 
    // root.slideIndex--; 
    root.slideIndex = (root.slideIndex - 1 < 0) ? root.numOfSlides - 1 : root.slideIndex - 1; 
    console.log('prev', root.slideIndex); 
} 

で：

if (dir == "ss-prev") { 
    // root.slideIndex--; 
    root.slideIndex = (root.slideIndex - 1 < 0) ? root.numOfSlides - 3 : root.slideIndex - 1; 
    console.log('prev', root.slideIndex); 
} 

https://codepen.io/anon/pen/xXBMZJ?editors=1111