在滑动之前将最后一张幻灯片添加到滑块的开头

Question

我有以下 javascript 对象控制我的滑块：

Slider = {
    slideWrap: "#slider ul",
    slide: "#slider ul li",
    prevTrigger: "#slider a.prev",
    nextTrigger: "#slider a.next",
    control: "#slider a.control",
    init: function() {
        jQuery(this.nextTrigger).click(this.moveRight.bind(this));
        jQuery(this.prevTrigger).click(this.moveLeft.bind(this));
    },
    moveRight: function(e) {
        e.preventDefault();
        jQuery(this.slideWrap).removeClass("no-transition");
        jQuery(this.slide).first().clone().appendTo(this.slideWrap);
        jQuery(this.slideWrap).css("marginLeft", "-100vw");
        jQuery(this.control).css("pointer-events", "none");
        setTimeout(function(){
            jQuery("#slider ul").addClass("no-transition");
            jQuery("#slider ul li").first().remove();
            jQuery("#slider ul").css("marginLeft", "0px");
            jQuery("a.control").css("pointer-events", "auto");
        }, 500);
    },
    moveLeft: function(e) {
        e.preventDefault();
        jQuery(this.slideWrap).removeClass("no-transition");
        jQuery(this.slide).last().clone().prependTo(this.slideWrap);
        jQuery(this.slideWrap).css("marginLeft", "100vw");
        setTimeout(function(){
            jQuery('#slider ul').addClass('no-transition');
            jQuery('#slider ul li').last().remove();
            jQuery('#slider ul').css("marginLeft", "0px");
            jQuery('a.control').css('pointer-events', 'auto');
        }, 500);
    }
}

向右移动效果很好，因为滑块向右滑动，克隆第一张幻灯片，将其附加到滑块的末尾，然后在超时功能中删除原始的第一张幻灯片。但是，我有一个向左滑动的问题，因为最后一张幻灯片需要在滑块移动之前预先放置。

在这里看我的小提琴...https://jsfiddle.net/f2hb68tn/12/

Answer 1

你可以试试这个 jsfiddle：https://jsfiddle.net/f2hb68tn/22/。

这里是修改后的代码：

moveLeft: function(e) {
    e.preventDefault();
    jQuery(this.slideWrap).addClass('no-transition');
    jQuery(this.slide).last().clone().prependTo(this.slideWrap);  // Prepend last slide
    var ctlWidth = "-" + jQuery("#slider").width() + "px";        // In pixels for IE11 
    jQuery(this.slideWrap).css("marginLeft", ctlWidth);        // Stay on current slide
    jQuery(this.control).css("pointer-events", "none");
    setTimeout(function () {
        jQuery('#slider ul').removeClass("no-transition");
        jQuery('#slider ul').css("marginLeft", "0px");     // Transition to first slide
     }, 10);                                   // Zero ms does not work well in Firefox
    setTimeout(function(){
        jQuery('#slider ul').addClass('no-transition');
        jQuery('#slider ul li').last().remove();                   // Remove last slide
        jQuery('a.control').css('pointer-events', 'auto');
    }, 500);
}

在 IE11（可能还有其他版本的 IE）中，ctlWidth 必须以像素为单位（例如 "-524px"）。如果您不需要支持该浏览器，则可以改用"-100vw"。