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

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

Close the search window,
please press close button or esc key.