Vô cực trượt nút trước logic không hoạt động

Question

Tôi đang cố tạo một thanh trượt vô cùng bằng jQuery. Trang trình chiếu đang hoạt động sẽ chiếm 2/3 màn hình, bản chiếu sắp tới sẽ bằng 1/3. Vì vậy, bạn đã thấy bản xem trước của trang trình bày tiếp theo.

Thanh trượt mà tôi đã tạo đang hoạt động. Khi bạn nhấp vào next thanh trượt sẽ được làm động ở bên trái.

Bí quyết

On init Tôi lặp lại trong hai slide đầu tiên sau khi trình bày cuối cùng. Khi slideIndex, giữ một mắt trên chỉ mục hiện tại, là số trang trình bày trừ đi 1, nó sẽ đặt lại thanh trượt về 0. Vì vậy, bạn đã có một thanh trượt vô cùng.

Vấn đề

vấn đề này được đưa ra khi tôi cũng muốn áp dụng hiệu ứng khi bạn đang ở slide đầu tiên và bấm trước đó. Về cơ bản nó sẽ làm tương tự, nhưng không đặt lại thanh trượt về 0, nhưng đến cuối trang trình bày.

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

Bởi vì tôi có một câu lệnh if của if (root.slideIndex === (root.numOfSlides - 2)) { nó sẽ luôn luôn được đặt lại bằng không, khi slideIndex bằng root.numOfSlides - 2. Vì vậy, nó không quan trọng nếu bạn nhấp vào trước đó hoặc tiếp theo, khi slideIndex là trong ví dụ của tôi tại trang trình bày 4, nó sẽ đặt lại về 0.

tôi tái tạo thanh trượt trong một codepen: https://codepen.io/anon/pen/zEmozr

Hope ai đó có thể giúp tôi ra, không biết làm thế nào để giải quyết vấn đề này, sau khi tìm kiếm và cố gắng vài ngày bây giờ. Nếu có điều gì đó không rõ ràng hoặc bất cứ điều gì, xin vui lòng cho tôi biết. Cảm ơn trước.

Answer 1

Thay đổi dòng này:

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

bởi:

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