自定义滑块问题

Question

我已经编写了一个带有面向对象的javascript的自定义滑块，如下所示。我把这个模块放在了这里https://jsfiddle.net/5z29xhzg/7/。向左或向右滑动后，克隆并相应地附加幻灯片，以便用户可以根据需要循环滑动滑块。有一个单独的功能来控制活动选项卡。单独使用时，标签和滑块可以完美地工作，但是当两者结合使用时我遇到了问题。例如，点击蓝色围裙＆＃39;然后单击左侧滑动按钮（可以将您带到“dave＆amp; busters＆＃39;幻灯片”）将您带到幸福幻灯片。或者使用选项卡单击最后一张幻灯片，然后单击下一步按钮不会显示任何内容。有人可以指出我写的对象中的缺陷。非常感谢任何帮助！

    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个标签。此时，您需要在第三个选项卡之前移动幻灯片，即第二个选项卡到结尾。当您说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

抱歉，我回来的时间比预期的要晚。看看那里。认为你的整个追加/前置/克隆事情过于复杂。

我得到了它的工作，但它仍有一个小错误。它会循环显示前进，前进和后退以及正确的链接突出显示，但是当您单击随机链接时它不会立即突出显示，但是当您单击下一个/上一个按钮时，所选图像的相关链接会突出显示。这肯定是一个进步！我相信我可以用另一种外观推出它，但是凌晨2点，我已经看了一个半小时了！

这是一个fiddle和一个片段（只是js cos我的msg太长了 - 我刚拿出内容末尾的段落，没有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();

});