よく使われているスライドショーJSライブラリ

Slick JS

有料ブログテーマAffingerでも使われているスライドショーライブラリ。
基本的なスライドショーのスタイルは押さえてあります。

シンプルにカスタマイズしていけるのが使われている理由かなと感じました。

• スワイプ
• ブレークポイントごとの設定
• 無限ループ
• サムネイル設定
• 矢印キーのナビゲーション
• スライドの追加、フィルター
• 自動再生

公式サイト
slick – the last carousel you’ll ever need

ライセンス

MITライセンス

あわせて読みたい

スライダープラグイン「slick.js」の使い方・カスタマイズ方法/ スライドドットの大きさを変える、色を… 【「Slick.js」の使い方・カスタマイズ方法】 「Slick.js」の使い方・カスタマイズ方法でよくある事例のメモです。 スライドのドットの大きさを変更する CSSで調整でき…

あわせて読みたい

「Slick.js」スライダーのボタンを押したときにスライドが止まるときの対処方法・使い方 スライダープラグイン「Slick.js」でスライダーのボタンを押すとautoplayに設定したスライドの動きが止まると言われてしまいました。 【状況】 ボタンを押すと1度スライ…

Swiper

有料ブログテーマSwellでも使われているスライドショーライブラリ。
久しぶりに公式サイトを覗いたらえらいことになってて驚いています。

Swiperを使っていれば現在のビジネスサイトで使われているスライドショー実装は網羅できます。
欠点はできることのオプションが多すぎるため仕様把握までに時間がかかります。

…とおどしておいたところで、公式サイトにて「SwiperStudio」が登場。
Swiperのノーコードビルダーで複雑なスライドショーをコーディングなしで作成できるツールです。
月$10かかるのがデメリットといえばデメリットです。

UI Initiativeで紹介されているプレミアムスライドショーのテンプレートはスタイリッシュすぎてちょっと感動しますね。

DEMOページにあるスライドショーをみたら「これ見たことある！」というスライドショーのフォーマットがたくさんできますので、使い方をマスターできれば戦力になります。

公式サイト
Swiper – The Most Modern Mobile Touch Slider

Swiper Demos

ライセンス

MITライセンス

あわせて読みたい

【JavaScript】Swiperを使って端がちょっと見えるスライダーを実装する方法 数あるJavaScriptスライダープラグインの中で、 ・bxslider.js ・slick.js の著名ですが今回利用したのが「Swiper」です。 【Swiperのメリット】 Swiperはオプションが…

Slider Pro

こちらもシンプルなスライドショープラグイン。WordPressに対応しているライセンスは有料で$30です。

• スワイプ
• ブレークポイントごとの設定
• 無限ループ
• サムネイル設定
• 矢印キーのナビゲーション
• スライドの追加、フィルター
• 自動再生

配布サイト
slider-pro/README.md at master · bqworks/slider-pro · GitHub

ライセンス

MITライセンス

あわせて読みたい

スライドJSプラグイン「Slider Pro」の実践的な使い方 JavaScriptのスライドプラグインはたくさん種類がありますが、 その中でも設定項目の多い「Slider Pro」の使い方です。 Slider Proの良いところとしては ・ブレイクポイ…