レスポンシブやスワイプ機能を実装できる、スライダー・カルーセルのプラグインやチュートリアル 20

  • Posted on
  • Category : Tips
レスポンシブやスワイプ機能を実装できる、スライダー・カルーセルのプラグインやチュートリアル 20

スマートフォンやタブレットが絡むサイト制作時に実装することが多い、レスポンシブ対応やスワイプ(フリック)などといった機能を簡単に実装できるスライダー・カルーセルのプラグインやチュートリアルのまとめです。いずれかひとつの機能のみ実装するだけでなく、中にはひとつのプラグインで複数の機能を同時に実装できるのもあります。

普段からよく使うものは大体決まっていたりするんですが、見せ方、対応ブラウザ、一部の機種で挙動が怪しいなどの理由で他のものを探すということもたまにあるので、そういった時の手間を省くためにメモしていたものです。
全てのプラグインをじっくり使ったことがあるわけではないのと、僕はiPhone持ちなので特にAndroidで上手く動作してくれるかわからないものも正直幾つかありますが、いずれもPCやiPhoneで確認した際には問題なく動作してたものです。

bxSlider

bxSlider

FlexSlider 2

FlexSlider 2

flipsnap.js

flipsnap.js

jQueryでレスポンシブ対応のフリックスライダー(サムネイル付き)をシンプルに作る方法 | BlackFlag

jQueryでレスポンシブ対応のフリックスライダー(サムネイル付き)をシンプルに作る方法 | BlackFlag

BlackFlag」さんでは上記以外にもレスポンシブ対応したスライダーを実装する方法を紹介しています。

Cycle2

Cycle2

WOW Slider

WOW Slider

Unslider

Unslider

SlidesJS

SlidesJS

Glide.js

Glide.js

Swipeshow

Swipeshow

TouchSlider jQuery Plugin

TouchSlider jQuery Plugin

Fotorama

Fotorama

Swiper

Swiper

TouchSlider

TouchSlider

Sly

Sly

TouchSwipe

TouchSwipe

OWL Carousel

OWL Carousel

Amazing Carousel

Amazing Carousel

Flexisel

Flexisel

Elastislide – A Responsive jQuery Carousel Plugin | Codrops

Elastislide - A Responsive jQuery Carousel Plugin | Codrops

Back to Top

レスポンシブやスワイプ機能を実装できる、スライダー・カルーセルのプラグインやチュートリアル 20

レスポンシブやスワイプ機能を実装できる、スライダー・カルーセルのプラグインやチュートリアル 20

/ Tips

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。