jQueryプラグインを使わずにフリック＆ドラッグで動くスライダーを作ってみる
レスポンシブサイトが増えてきて、
フリックへの対応の必要性は日々高まっています。
今広まっている多くのスライダーやカルーセルのjQueryプラグインでは
フリックやドラッグで動かすことができるようになってきています。
ただ、特殊な使用等のためプラグインがどうしても使えない場合は、
フリックやドラッグでの動きを、
プラグインなしでつける必要が出てくるかもしれません。
そのため、今回はその方法について調べて、
実際に作ってみました。
方法は、↓こちらのサイトを参考にさせていただきました。
DEMOはこちら↓
参考にさせていただいたサイトではフリックのみに対応する場合だったので、
せっかくなので、マウスのドラッグに対応させる方法を紹介させていただきます。
まず、参考サイトに紹介されていたフリックに必要なjQueryの記述を載せます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | $('.slider').on({ /* フリック開始時 */ 'touchstart': function(e) { this.touchX = event.changedTouches[0].pageX; this.slideX = $(this).position().left; }, /* フリック中 */ 'touchmove': function(e) { e.preventDefault(); this.slideX = this.slideX - (this.touchX - event.changedTouches[0].pageX ); $(this).css({left:this.slideX}); this.accel = (event.changedTouches[0].pageX - this.touchX) * 5; this.touchX = event.changedTouches[0].pageX; }, /* フリック終了 */ 'touchend': function(e) { this.slideX += this.accel $(this).animate({left : this.slideX },200,'linear'); this.accel = 0; if (this.slideX > 0) { this.slideX = 0; $(this).animate({left:"0px"},500); } if (this.slideX < -720) { this.slideX = -720; $(this).animate({left:"-600px"},500); } } }); |
慣性をつける方法も一緒に紹介されていたので、つけてみました。
さらに、マウスに対応させます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | /* ドラッグ開始 */ $('.slider').mousedown(function(e){ this.touchX = event.pageX; this.slideX = $(this).position().left; /* ドラッグ中 */ $('.slider').mousemove(function(e){ e.preventDefault(); this.slideX = this.slideX - (this.touchX - event.pageX ); $(this).css({left:this.slideX}); this.accel = (event.pageX - this.touchX) * 5; this.touchX = event.pageX; }); /* ドラッグ終了 */ }).mouseup(function(e){ this.slideX += this.accel $(this).animate({left : this.slideX },200,'linear'); this.accel = 0; if (this.slideX > 0) { this.slideX = 0; $(this).animate({left:"0px"},500); } if (this.slideX < -720) { this.slideX = -720; $(this).animate({left:"-600px"},500); } $('.slider').off("mousemove"); }); |
これでマウスのドラッグでも動かせるようになりました。
Author Profile
SHARE
