使いやすくて高機能なものが多数!スライダー実装時に便利なプラグインやチュートリアルまとめ

  • Posted on
  • Category : Tips
使いやすくて高機能なものが多数!スライダー実装時に便利なプラグインやチュートリアルまとめ

実際に使用して良かったものも含め、スライダー系のスクリプトやチュートリアルで覚えておきたいと思ってメモしてたのが溜まってきたので備忘録兼ねてまとめました。とにかく高機能なものから動きがユニークなものまで様々なタイプがあり、ほとんどが最近実装する機会が多いと思うレスポンシブやタッチ・スワイプといった動きにも対応しています。

Slider Pro

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

Swiper

モバイルサイト向けのタッチスライダーを実装できるプラグインで、jQueryを使用せずに単体のスクリプトとして使用することも可能です。
オプションやパラメータもここではかなりの数になってしまうので挙げませんが豊富に用意されていて、3Dやパララックスといったエフェクトを使用したり、マウスのホイール・ドラッグ操作に対応したものを実装することもできます。
デモも多数用意されており、気に入った動きがあれば各デモの上にある「Source code」から実装するためのソース確認をすることもできます。

Flickity

Flickity

タッチ・フリック・レスポンシブなどに対応したプラグインで、こちらも先ほどのSwiperと同様に単体のスクリプトで使用することもjQueryプラグインとして使用することもできるタイプのものです。
以下のようにオプションも基本的な設定から位置やドラッグについての設定までひと通り揃っており、それぞれデモも用意されているので動きの確認もすることができます。

  • accessibility
  • autoPlay
  • cellAlign
  • cellSelector
  • contain
  • draggable
  • freeScroll
  • friction
  • initialIndex
  • percentPosition
  • prevNextButtons
  • pageDots
  • resize
  • rightToLeft
  • setGallerySize
  • watchCSS
  • wrapAround

ブラウザに関してはじっくり検証をしたわけではありませんが、IE9以上であれば問題なく動作しているようです。

Ideal Image Slider

Ideal Image Slider

レスポンシブやタッチデバイス対応もされており、jQueryなどのライブラリ等も必要なく単体で実装することができます。
下記のような基本的な設定機能以外にもイベントやAPIについての機能もあり、デモでこれらのトリガーをconsoleを使って確認ができるようになっています。

  • interval
  • transitionDuration
  • effect
  • disableNav
  • keyboardNav
  • previousNavSelector
  • nextNavSelector

jQuery Hero Slider Plugin

jQuery Hero Slider Plugin

パッと見はシンプルなスライダーですが、スライド切り換え時のエフェクトが面白いjQueryプラグインです。
スライド時の動きはdata-transform="scale"data-transform="rotate"を組み合わせて指定する形になっており、ナビやオートプレイの有無、速度調整といったオプションも下記のように最低限必要なものはひと通り揃っています。

  • activate
  • touchSwipe
  • nextText
  • prevText
  • showControls
  • showButtons
  • showBullets
  • arrowKeys
  • autoPlay
  • duration

対応ブラウザに関して詳しい記載はありませんが、IEは10以上でないとちゃんと動かないようでした。

slick

slick

こちらはカルーセル向けに作られたものではありますが、スライダーとしても使えるjQueryプラグインです。
下記はほんの一部となりますがこのような機能やオプションが豊富に用意されており、レスポンシブやドラッグ・スワイプ対応をはじめ、ナビ・オートプレイ・ループ対応などの機能もあります。
また、レスポンシブ対応は表示数などをそれぞれのブレークポイント毎に細かく指定することができます。

  • accessibility
  • autoplay
  • autoplaySpeed
  • arrows
  • dots
  • draggable
  • swipe
  • fade
  • infinite
  • responsive
  • slide
  • slidesToShow
  • slidesToScroll

サイトではデモも多数用意されているので、それぞれのオプションがどのような動きをするか確認したり、組み合わせることで実装できる動きなどもわかりやすいと思います。
ブラウザに関してはじっくり検証をしたわけではありませんが、IE8でもほぼ問題なく動作しているようです。

Tilted Content Slideshow

Tilted Content Slideshow

FWAのビジュアル部分のように、コンテンツを斜めにして表示させることができるスライダーのチュートリアルで、アニメーションの動きはCSSを使用して実装しています。
IEだと11でもアニメーションが付かないので、ひと通りのブラウザに対応する必要がある場合は使えませんが、すごくかっこ良いのでどこかで使ってみたいです。

Draggable Dual-View Slideshow

Draggable Dual-View Slideshow

こちらはこれまでのものとは少し違ったタイプのもので、Dragdealer.jsを用いてドラッグ可能なフルスクリーンスライダーとカルーセルの2つを組み合わせたデュアルビュースライドショーを実装する(説明がわかりにくいので、実際に動きは見てもらった方が良いと思います…)チュートリアルとなっており、スライダーやカルーセルの動きはドラッグとキーボードでの操作が可能です。
レスポンシブ対応されており、PCなどウィンドウサイズが大きい場合はフルスクリーンとカルーセルのどちらか選択する(アイコンで切り替え可能)ことができ、モバイルなどのようにウィンドウサイズが小さい場合はフルスクリーンのスライドのみという見栄えとなります。

以上、スライダー実装時に便利なプラグインやチュートリアルのまとめでした。
今回紹介したものはいずれも良さそうなものではあるのですが、その中でも個人的に特におすすめなのは「Slider Pro」と「slick」なので、とりあえず新しいプラグインを試したいという人はこれらを是非試してみてください。

また、同じくスライダー関連のプラグインに関しては以前にも一度まとめており、下記で紹介しているのは全てレスポンシブやスワイプ機能を実装できるプラグインやチュートリアルなので、興味がある方はこちらもご覧になってみてください。

Back to Top

使いやすくて高機能なものが多数!スライダー実装時に便利なプラグインやチュートリアルまとめ

使いやすくて高機能なものが多数!スライダー実装時に便利なプラグインやチュートリアルまとめ

/ Tips

Tagged with:

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のアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。