javascript - 自定义 slider 问题

Question

我已经使用面向对象的 javascript 编写了一个自定义 slider ，如下所示。我在此处的 fiddle 中包含了该模块 https://jsfiddle.net/5z29xhzg/7/ .向左或向右滑动后，将相应地复制和附加幻灯片，以便用户可以根据需要循环播放 slider 。有一个单独的函数用于控制事件选项卡。单独使用时，选项卡和 slider 工作得很好，但当两者结合使用时我遇到了问题。例如，单击“蓝色围裙”，然后单击左侧的滑动按钮(这会将您带到“dave & busters”幻灯片)，将您带到 bliss 幻灯片。或者使用选项卡单击最后一张幻灯片，然后单击下一步按钮不显示任何内容。有人能指出我写的对象中的缺陷吗？非常感谢任何帮助!

    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 中。

编辑:以下不起作用

当页面加载时，currentSlide 是幻灯片 1。现在假设您单击第 3 个选项卡。此时，您需要将幻灯片移到第 3 个选项卡之前，即第 2 个选项卡到末尾。当您说 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);
    },