私は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このための組み込みの機能またはプロパティが見つかりませんでした。しかし、合理的な回避策はありますか？
彼ら！やった。
数時間かかりました。
初期再現問題はこちら
以下で説明するように、私の実用的なソリューションはhereです。
このループ効果へのスイッチを配置する場所を見つけました。そして、私はそれを新しい
==option > looping（真/偽）として設定しました!!!
オプションが false に設定されている場合looping... ループしません。
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
};
これを実現するために関数
を少し変更しました。と呼んだ
a に基づいて新しい条件を追加しました。
この変数はデフォルトです。
画像インデックスに移動しようとすると、その値は false になります。ただし、ループ オプションが false に設定されている場合のみです。Plugin.prototype._slidevarOK_Proceed
true-1data.total
元の機能を維持したかった...
;)
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が false の場合: スクリプトはアニメーション機能を完全にバイパスします。
小さな 10 ピクセルの「バウンス」効果に置き換えられます。
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 ファイルを作成しました。
編集の翌日
「タッチ」をマウスでクリックしたリンクと同じように動作させるために、他に 2 つの機能を変更する必要がありました...上記の.zipファイルにもこれらの変更が反映されています...
クリック用に変更された機能は :_slideです。
クリック用に変更された機能は_setuptouch、 および_touchmoveです。
bounceForwardおよびの 2 つのクラスを変更できますbounceBackward。
最新のデモはこちらです。タッチ対応デバイスで試してみてください。