在SlidesJS中禁用「環繞」

Question

我使用SlidesJS，這是一個非常可自定義的幻燈片分頁插件。

這是我的初始化。

$('.slides').slidesjs 
({ 
    width: 300, 
    height: 300, 
    navigation: false,    // It's for swiping in an iOS web app 
    pagination: false, 
    generatePagination: false 
}); 

但是，我不希望幻燈片包裹「相反方向」。我不知道是否有這個術語，所以我畫的這個例子：

綠色=下一個
藍=上一頁

我要的是揮筆其中從4 -> 1或1 -> 4變爲禁用。我還沒有找到一個內置的功能或屬性。但是，是否有一個合理的解決方法？

Answer 1

夥計們！我做到了。
花了幾個小時。

最初的重建問題是here

而我的工作方案，如下所述，是here。

我發現在哪裏可以切換到這種循環效果。
AND我將它設置爲新的option ==>looping（true/false）!!!
如果looping選項設置爲false ...它不會循環。

defaults = { 
    width: 940, 
    height: 528, 
    start: 1, 
    navigation: { 
    active: true, 
    effect: "slide" 
    }, 
    pagination: { 
    active: true, 
    effect: "slide" 
    }, 
    play: { 
    active: false, 
    effect: "slide", 
    interval: 5000, 
    auto: false, 
    swap: true, 
    pauseOnHover: false, 
    restartDelay: 2500 
    }, 
    effect: { 
    slide: { 
     speed: 500 
    }, 
    fade: { 
     speed: 300, 
     crossfade: true 
    } 
    }, 
    callback: { 
    loaded: function() {}, 
    start: function() {}, 
    complete: function() {} 
    }, 
    looping: false     // Looping effect from last image to first and vice-versa 
}; 

我稍微修改的Plugin.prototype._slide功能來實現這一目標。
我添加了一個基於var的新條件，我稱其爲OK_Proceed。

默認情況下，此變量爲true。
嘗試轉到圖像索引-1或data.total ...時，其值會變爲false ...但只有當循環選項設置爲false時。

我希望保持原有的功能...
;）

var OK_Proceed=true;        // ADDED var 
    console.log(this.options.looping); 
    if (next === -1) { 
     if(this.options.looping){ 
     next = this.data.total - 1; 
     }else{ 
      OK_Proceed=false; 
     } 
    } 
    if (next === this.data.total) { 
     if(this.options.looping){ 
      next = 0; 
     }else{ 
      OK_Proceed=false; 
     } 
    } 

當此OK_Proceed是假的：腳本entierely繞過動畫功能。
它被一個小的10px「反彈」效果取代。

唯一剩下要做的就是重置data.animating值：

$.data(_this, "animating", false); 

因此，這裏是全功能：

Plugin.prototype._slide = function(number) {   console.log("Line 430 - _slide: "); 
    var $element, currentSlide, direction, duration, next, prefix, slidesControl, timing, transform, value, 
    _this = this; 
    $element = $(this.element); 
    this.data = $.data(this);        console.log(JSON.stringify($.data(this))); 
    if (!this.data.animating && number !== this.data.current + 1) { 
    $.data(this, "animating", true); 
    currentSlide = this.data.current;    console.log("Line 437 - currentSlide: "+currentSlide); 
    if (number > -1) { 
     number = number - 1; 
     value = number > currentSlide ? 1 : -1;    console.log("Line 440 - value: "+value); 
     direction = number > currentSlide ? -this.options.width : this.options.width; 
     next = number; 
    } else { 
     value = this.data.direction === "next" ? 1 : -1; 
     direction = this.data.direction === "next" ? -this.options.width : this.options.width; 
     next = currentSlide + value;     console.log("Line 446 - next: "+next); 
    } var OK_Proceed=true;        // ADDED var 
    console.log(this.options.looping); 
    if (next === -1) { 
     if(this.options.looping){ 
     next = this.data.total - 1; 
     }else{ 
      OK_Proceed=false; 
     } 
    } 
    if (next === this.data.total) { 
     if(this.options.looping){ 
      next = 0; 
     }else{ 
      OK_Proceed=false; 
     } 
    } 
    if(OK_Proceed){this._setActive(next);       // ADDED condition 
    slidesControl = $(".slidesjs-control", $element); 
    if (number > -1) { 
     slidesControl.children(":not(:eq(" + currentSlide + "))").css({ 
     display: "none", 
     left: 0, 
     zIndex: 0 
     }); 
    } 
    slidesControl.children(":eq(" + next + ")").css({ 
     display: "block", 
     left: value * this.options.width, 
     zIndex: 10 
    }); 
    this.options.callback.start(currentSlide + 1); 
    if (this.data.vendorPrefix) { 
     prefix = this.data.vendorPrefix; 
     transform = prefix + "Transform"; 
     duration = prefix + "TransitionDuration"; 
     timing = prefix + "TransitionTimingFunction"; 
     slidesControl[0].style[transform] = "translateX(" + direction + "px)"; 
     slidesControl[0].style[duration] = this.options.effect.slide.speed + "ms"; 
     return slidesControl.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function() { 
     slidesControl[0].style[transform] = ""; 
     slidesControl[0].style[duration] = ""; 
     slidesControl.children(":eq(" + next + ")").css({ 
      left: 0 
     }); 
     slidesControl.children(":eq(" + currentSlide + ")").css({ 
      display: "none", 
      left: 0, 
      zIndex: 0 
     }); 
     $.data(_this, "current", next); 
     $.data(_this, "animating", false); 
     slidesControl.unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd"); 
     slidesControl.children(":not(:eq(" + next + "))").css({ 
      display: "none", 
      left: 0, 
      zIndex: 0 
     }); 
     if (_this.data.touch) { 
      _this._setuptouch(); 
     } 
     return _this.options.callback.complete(next + 1); 
     }); 
    } else { 
     return slidesControl.stop().animate({ 
     left: direction 
     }, this.options.effect.slide.speed, (function() { 
     slidesControl.css({ 
      left: 0 
     }); 
     slidesControl.children(":eq(" + next + ")").css({ 
      left: 0 
     }); 
     return slidesControl.children(":eq(" + currentSlide + ")").css({ 
      display: "none", 
      left: 0, 
      zIndex: 0 
     }, $.data(_this, "current", next), $.data(_this, "animating", false), _this.options.callback.complete(next + 1)); 
     })); 
    } } else { 
    console.log("HERE"); 
    $.data(_this, "animating", false); 
    console.log(JSON.stringify($.data(this))); 

    // Bouncing effect 
    $(".slidesjs-control").stop().animate({ "left" : "-=10px" }, 100, "easeInOutBounce", function(){ 
     $(".slidesjs-control").animate({ "left" : "+=10px" }, 100, "easeInOutBounce"); 
    }); 

    }      // End added condition 
    } 
}; 

我打掃從所有console.logs此代碼，創建一個zip file ready to use。

編輯後的第二天
有其他兩個功能，以使「觸摸」行爲相同，鼠標單擊鏈接修改...的.zip文件上面也反映了這些更改...

修改爲點擊的功能是：_slide。
爲點擊修改的功能是：_setuptouch和_touchmove。

有兩個類可供您修改：bounceForward和bounceBackward。

The lastest demo is here。在支持觸摸的設備上試用。