Blog

jQueryプラグインを使わずにフリック&ドラッグで動くスライダーを作ってみる

2013.11.20Cat:jQuery デザイナー

レスポンシブサイトが増えてきて、

フリックへの対応の必要性は日々高まっています。

 

今広まっている多くのスライダーやカルーセルのjQueryプラグインでは

フリックやドラッグで動かすことができるようになってきています。

ただ、特殊な使用等のためプラグインがどうしても使えない場合は、

フリックやドラッグでの動きを、

プラグインなしでつける必要が出てくるかもしれません。

そのため、今回はその方法について調べて、

実際に作ってみました。

 

方法は、↓こちらのサイトを参考にさせていただきました。

jQueryで作る最もシンプルなフリックスライド

 

DEMOはこちら↓

DEMO

 

参考にさせていただいたサイトではフリックのみに対応する場合だったので、

せっかくなので、マウスのドラッグに対応させる方法を紹介させていただきます。

 

まず、参考サイトに紹介されていたフリックに必要なjQueryの記述を載せます。

慣性をつける方法も一緒に紹介されていたので、つけてみました。

 

さらに、マウスに対応させます。

これでマウスのドラッグでも動かせるようになりました。

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ