Пользовательский слайдер проблема

Question

Я написал пользовательский слайдер с объектно-ориентированным javascript, как показано ниже. Я включил модуль в скрипку здесь https://jsfiddle.net/5z29xhzg/7/. После скольжения влево или вправо слайды клонируются и присоединяются соответственно так, чтобы пользователь мог перемещаться по ползунку столько, сколько захотелось. Для управления активной вкладкой существует отдельная функция. При использовании отдельно, вкладки и слайдер работают отлично, но у меня возникает проблема, когда они используются в объединении. Например, щелкнув «синий фартук», а затем нажав левую кнопку слайда (который приведет вас к слайду «dave &»), вы попадете на сладостный слайд. Или щелкнув последний слайд с помощью вкладок, а затем нажав следующую кнопку, ничего не отображается. Может кто-то указать на недостаток в объекте, который я написал. Любая помощь высоко ценится!

GiftSlider = { 
    prev: '.slider-container .prev', 
    next: '.slider-container .next', 
    slide: '.slide', 
    slidesContainer: '#slides', 
    navLink: '.gift-nav li a', 
    init: function() { 
     // Initialize nextSlide function when clicking right arrow 
     $(this.next).click(this.nextSlide.bind(this)); 
     $(this.next).click(this.activeTabs.bind(this)); 
     // Initialize prevSlide function when clicking left arrow 
     $(this.prev).click(this.prevSlide.bind(this)); 
     $(this.prev).click(this.activeTabs.bind(this)); 
     // Initialize toggleSlides and activeTab functions when clicking nav links 
     $(this.navLink).click(this.toggleSlides.bind(this)); 
     $(this.navLink).click(this.activeTabs.bind(this)); 
    }, 
    nextSlide: function(e) { 
     // Prevent default anchor click 
     e.preventDefault(); 
     // Set the current slide 
     var currentSlide = $('.slide.current'); 
     // Set the next slide 
     var nextSlide = $('.slide.current').next(); 
     // remove the current class from the current slide 
     currentSlide.removeClass("current"); 
     // Move the current slide to the end so we can cycle through 
     currentSlide.clone().appendTo(this.slidesContainer); 
     // remove the last slide so there is not two instances 
     currentSlide.remove(); 
     // Add current class to next slide to display it 
     nextSlide.addClass("current"); 
    }, 
    prevSlide: function(e) { 
     // Prevent defaulct anchor click 
     e.preventDefault(); 
     // Set the current slide 
     var currentSlide = $('.slide.current'); 
     // Set the last slide 
     var lastSlide = $('.slide').last(); 
     // remove the current class from the current slide 
     currentSlide.removeClass("current"); 
     // Move the last slide to the beginning so we can cycle through 
     lastSlide.clone().prependTo(this.slidesContainer); 
     // remove the last slide so there is not two instances 
     lastSlide.remove(); 
     // Add current class to new first slide 
     $('.slide').first().addClass("current"); 
    }, 
    toggleSlides: function(e) { 
     // Prevent defaulct anchor click 
     e.preventDefault(); 
     var itemData = e.currentTarget.dataset.index; 
     var currentSlide = $('.slide.current'); 
     currentSlide.removeClass("current"); 
     newSlide = $('#slide-' + itemData); 
     // currentSlide.clone().appendTo(this.slidesContainer); 
     newSlide.addClass("current"); 
     // console.log(newSlide); 
    }, 
    activeTabs: function() { 
     // *** This could be much simpler if we didnt need to match the slider buttons 
     // *** up with nav tabs. Because I need to track the slider as well, I have 
     // *** made this its own function to be used in both instances 
     // get the active slide 
     var activeSlide = $('.slide').filter(':visible'); 
     // get the active slide's id 
     var currentId = activeSlide.attr('id'); 
     // grab just the number from the active slide's id 
     var currentNum = currentId.slice(-1); 
     // remove any active gift-nav links 
     $(this.navLink).removeClass("active"); 
     // get the current tab by matching it to the current slide's id 
     var currentTab = $('.gift-nav li a[data-index="' + currentNum + '"]'); 
     // make that active 
     currentTab.addClass("active"); 
    } 
} 

$(document).ready(function(){ 

    // Init our objects 
    GiftSlider.init(); 

}); 

Answer 1

Ошибка в toggleSlides.

EDIT: Ниже не работает

При загрузке страницы, currentSlide является слайд 1. Теперь предположим, что вы выберите вкладку 3rd. На этом этапе вам нужно переместить слайд перед третьей вкладкой, то есть второй вкладкой до конца. Когда вы говорите currentSlide.clone().appendTo(this.slidesContainer);, вместо этого вы перемещаете первый слайд до конца. Поэтому, независимо от того, какую вкладку вы нажали, при нажатии предыдущей кнопки она переходила к первому слайду.

Если вместо этого вы делаете newSlide.prev().clone().appendTo(this.slidesContainer);, код, похоже, работает нормально.

toggleSlides: function(e) { 
    // Prevent defaulct anchor click 
    e.preventDefault(); 
    var itemData = e.currentTarget.dataset.index; 
    var currentSlide = $('.slide.current'); 
    currentSlide.removeClass("current"); 
    newSlide = $('#slide-' + itemData); 
    //currentSlide.clone().appendTo(this.slidesContainer); 
    newSlide.prev().clone().appendTo(this.slidesContainer); 
    newSlide.addClass("current"); 
    //console.log("In toggle slide: "+newSlide.next().attr("id")); 
    //console.log("In toggle slide: "+newSlide.prev().attr("id")); 
    //console.log("In toggle slide: "+$('.slide.current').next().attr("id")); 
}, 

Это похоже на работу. Проверьте это на https://jsfiddle.net/rfgnm992/1/. Ваши nextSlide и previousSlide, похоже, сохраняют текущий слайд в начале. toggleSlides не делал.

toggleSlides: function(e) { 
     // Prevent defaulct anchor click 
     e.preventDefault(); 
     var itemData = e.currentTarget.dataset.index; 
     var currentSlide = $('.slide.current'); 
     currentSlide.removeClass("current"); 
     newSlide = $('#slide-' + itemData); 
     //keep new slide at the beginning and move the preceding slides to the end 
     newSlide.nextAll().addBack().prependTo(this.slidesContainer); 
    //console.log("NewSlide.next: "+newSlide.next().attr('id') + "NewSlide.next.next: "+newSlide.next().next().attr('id')+"newSlide.next.next.next: "+newSlide.next().next().next().attr('id')); 
     //currentSlide.clone().appendTo(this.slidesContainer); 
     newSlide.addClass("current"); 
     // console.log(newSlide); 
    }, 

Answer 2

жаль, что я вернулся немного позже, чем ожидалось. Там посмотрел. Подумайте, что вы слишком усложняете вещи с помощью всего приложения append/prepend/cloning.

У меня это работает, но в нем еще есть небольшая ошибка. Цифры округляются, вперед и назад, а правильные ссылки выделяются, однако, когда вы нажимаете на случайную ссылку, она не сразу выделяется, но когда вы нажимаете кнопки next/prev, выделяются соответствующие ссылки с выбранного изображения. Это, безусловно, аванс !!! Я уверен, что смогу свернуть с другого взгляда, но его 2ам здесь, и я уже смотрел на него полтора часа!

Вот fiddle и фрагмент (только Js соз мой тзд слишком долго - я просто вынул пункт в конце содержания, без CSS изменений)

GiftSlider = { 
    prev: '.slider-container .prev', 
    next: '.slider-container .next', 
    slide: '.slide', 
    slidesContainer: '#slides', 
    navLink: '.gift-nav li a', 
    init: function() { 
     // Initialize nextSlide function when clicking right arrow 
     $(this.next).click(this.nextSlide.bind(this)); 
     $(this.next).click(this.activeTabs.bind(this)); 
     // Initialize prevSlide function when clicking left arrow 
     $(this.prev).click(this.prevSlide.bind(this)); 
     $(this.prev).click(this.activeTabs.bind(this)); 
     // Initialize toggleSlides and activeTab functions when clicking nav links  
     $(this.navLink).click(this.activeTabs.bind(this)); 
    $(this.navLink).click(this.toggleSlides.bind(this)); 
    }, 
    nextSlide: function(e) { 
     // Prevent default anchor click 
     e.preventDefault(); 
     // Set the current slide 
     var currentSlide = $('.slide.current'); 
     // Set the next slide 
    var currentId = currentSlide.attr('id'); 
    var currNum = (currentId.slice(-1)); 
    var nextNum; 
    var increment = 1; 
    if (currNum == 4){ 
     nextNum = 1; 
    } 
    else 
    { 
     nextNum = parseInt(currNum) + parseInt(increment) ; 
    } 
     var nextSlide = $('#slide-' + nextNum); 
     // remove the current class from the current slide 
     currentSlide.removeClass("current"); 
     // Add current class to next slide to display it 
     nextSlide.addClass("current"); 
    // remove the last slide so there is not two instances 
    }, 
    prevSlide: function(e) { 
     // Prevent default anchor click 
     e.preventDefault(); 
     // Set the current slide 
     var currentSlide = $('.slide.current'); 
     // Set the last slide 
    var currentId = currentSlide.attr('id'); 
    var currNum = (currentId.slice(-1)); 
    var prevNum; 
    var decrement =1; 
    if (currNum == 1){ 
     prevNum = 4; 
    } 
    else 
    { 
     prevNum = parseInt(currNum) - parseInt(decrement) ; 
    } 
     var prevSlide = $('#slide-' + prevNum); 
    // Move the last slide to the beginning so we can cycle through 
     currentSlide.removeClass("current"); 
    // Add current class to new first slide 
     prevSlide.addClass("current"); 
    }, 
    toggleSlides: function(e) { 
     // Prevent defaulct anchor click 
     e.preventDefault();  
    var itemData = e.currentTarget.dataset.index; 
     var currentSlide = $('.slide.current'); 
     currentSlide.removeClass("current"); 
     newSlide = $('#slide-' + itemData); 
     newSlide.addClass("current"); 

    }, 
    activeTabs: function() { 
     var activeSlide = $('.slide').filter('.current'); 
     // get the active slide's id 
     var currentId = activeSlide.attr('id'); 
     // grab just the number from the active slide's id 
     var currentNum = currentId.slice(-1); 
     // remove any active gift-nav links 
     $(this.navLink).removeClass("active"); 
     // get the current tab by matching it to the current slide's id 
     var currentTab = $('.gift-nav li a[data-index="'+ currentNum + '"]'); 
     // make that active 
     currentTab.addClass("active"); 
    } 
} 

$(document).ready(function(){ 

    // Init our objects 
    GiftSlider.init(); 

});