実際に使用して良かったものも含め、スライダー系のスクリプトやチュートリアルで覚えておきたいと思ってメモしてたのが溜まってきたので備忘録兼ねてまとめました。とにかく高機能なものから動きがユニークなものまで様々なタイプがあり、ほとんどが最近実装する機会が多いと思うレスポンシブやタッチ・スワイプといった動きにも対応しています。
Slider Pro
「Pro」とついているのでパッと見は有料かと思うのですが、無料で使用できるjQueryプラグインです。
とにかく高機能でレスポンシブやタッチ・スワイプといったものはもちろん、下記のように様々な設定や機能が用意されています。
- modular architecture
- responsive
- touch-swipe
- CSS3 transitions
- animated layers (and static)
- infinite scrolling
- carousel layout
- full width and full window support
- thumbnails
- deep linking
- lazy loading
- retina-enabled
- fade effect
- full-screen support
- CSS-only navigation controls (no graphics) for easy customization
- video support
- conditional images (different images for different screen sizes)
- JavaScript breakpoints
サイトでは幅いっぱいのカルーセルやサムネイル付きなど各機能を用いた5タイプのデモが公開されており、これを見てもわかるようにスライダーで実装されることが多いほとんどの動きを実装することができます。
また、ブラウザに関してもじっくり検証をしたわけではありませんが、IE8でもほぼ問題なく動作しているようです。
Swiper
モバイルサイト向けのタッチスライダーを実装できるプラグインで、jQueryを使用せずに単体のスクリプトとして使用することも可能です。
オプションやパラメータもここではかなりの数になってしまうので挙げませんが豊富に用意されていて、3Dやパララックスといったエフェクトを使用したり、マウスのホイール・ドラッグ操作に対応したものを実装することもできます。
デモも多数用意されており、気に入った動きがあれば各デモの上にある「Source code」から実装するためのソース確認をすることもできます。
Flickity
タッチ・フリック・レスポンシブなどに対応したプラグインで、こちらも先ほどのSwiperと同様に単体のスクリプトで使用することもjQueryプラグインとして使用することもできるタイプのものです。
以下のようにオプションも基本的な設定から位置やドラッグについての設定までひと通り揃っており、それぞれデモも用意されているので動きの確認もすることができます。
- accessibility
- autoPlay
- cellAlign
- cellSelector
- contain
- draggable
- freeScroll
- friction
- initialIndex
- percentPosition
- prevNextButtons
- pageDots
- resize
- rightToLeft
- setGallerySize
- watchCSS
- wrapAround
ブラウザに関してはじっくり検証をしたわけではありませんが、IE9以上であれば問題なく動作しているようです。
Ideal Image Slider
レスポンシブやタッチデバイス対応もされており、jQueryなどのライブラリ等も必要なく単体で実装することができます。
下記のような基本的な設定機能以外にもイベントやAPIについての機能もあり、デモでこれらのトリガーをconsoleを使って確認ができるようになっています。
- interval
- transitionDuration
- effect
- disableNav
- keyboardNav
- previousNavSelector
- nextNavSelector
jQuery Hero Slider Plugin
パッと見はシンプルなスライダーですが、スライド切り換え時のエフェクトが面白いjQueryプラグインです。
スライド時の動きはdata-transform="scale"
とdata-transform="rotate"
を組み合わせて指定する形になっており、ナビやオートプレイの有無、速度調整といったオプションも下記のように最低限必要なものはひと通り揃っています。
- activate
- touchSwipe
- nextText
- prevText
- showControls
- showButtons
- showBullets
- arrowKeys
- autoPlay
- duration
対応ブラウザに関して詳しい記載はありませんが、IEは10以上でないとちゃんと動かないようでした。
slick
こちらはカルーセル向けに作られたものではありますが、スライダーとしても使えるjQueryプラグインです。
下記はほんの一部となりますがこのような機能やオプションが豊富に用意されており、レスポンシブやドラッグ・スワイプ対応をはじめ、ナビ・オートプレイ・ループ対応などの機能もあります。
また、レスポンシブ対応は表示数などをそれぞれのブレークポイント毎に細かく指定することができます。
- accessibility
- autoplay
- autoplaySpeed
- arrows
- dots
- draggable
- swipe
- fade
- infinite
- responsive
- slide
- slidesToShow
- slidesToScroll
サイトではデモも多数用意されているので、それぞれのオプションがどのような動きをするか確認したり、組み合わせることで実装できる動きなどもわかりやすいと思います。
ブラウザに関してはじっくり検証をしたわけではありませんが、IE8でもほぼ問題なく動作しているようです。
Tilted Content Slideshow
FWAのビジュアル部分のように、コンテンツを斜めにして表示させることができるスライダーのチュートリアルで、アニメーションの動きはCSSを使用して実装しています。
IEだと11でもアニメーションが付かないので、ひと通りのブラウザに対応する必要がある場合は使えませんが、すごくかっこ良いのでどこかで使ってみたいです。
Draggable Dual-View Slideshow
こちらはこれまでのものとは少し違ったタイプのもので、Dragdealer.jsを用いてドラッグ可能なフルスクリーンスライダーとカルーセルの2つを組み合わせたデュアルビュースライドショーを実装する(説明がわかりにくいので、実際に動きは見てもらった方が良いと思います…)チュートリアルとなっており、スライダーやカルーセルの動きはドラッグとキーボードでの操作が可能です。
レスポンシブ対応されており、PCなどウィンドウサイズが大きい場合はフルスクリーンとカルーセルのどちらか選択する(アイコンで切り替え可能)ことができ、モバイルなどのようにウィンドウサイズが小さい場合はフルスクリーンのスライドのみという見栄えとなります。
以上、スライダー実装時に便利なプラグインやチュートリアルのまとめでした。
今回紹介したものはいずれも良さそうなものではあるのですが、その中でも個人的に特におすすめなのは「Slider Pro」と「slick」なので、とりあえず新しいプラグインを試したいという人はこれらを是非試してみてください。
また、同じくスライダー関連のプラグインに関しては以前にも一度まとめており、下記で紹介しているのは全てレスポンシブやスワイプ機能を実装できるプラグインやチュートリアルなので、興味がある方はこちらもご覧になってみてください。