7月の半分が過ぎつつ…

夏本番がスタートしている中、暑さが続きますが、熱中症にならないように気を付けてくださいね。

もうすぐ、4年に１度の開催のパリオリンピックの予選が始まりますね！

でも、家庭の事情により大好きな海に行けません…

もし行けるとしたら、来年以降になるのでしょうね…

話を取り戻して…

「Slider」ライブラリーの種類のご紹介

Sliderのライブラリーの種類をご紹介していきますね。

昨日、ご紹介した「Slick」のほかに、Sliderのライブラリーをご紹介します。

Webサイトのデザインに合わせて実装してみてください。

Felicity

レスポンシブ対応した、フリック可能なスライダープラグインです。

スライダーの設定は、jQuery側というよりもCSS側での設定に重点を置いているため、ノンプログラマーでも設定しやすいようになっています。

豊富なオプションやAPIも豊富で、初心者だけではなく、経験者にも満足できるスライダーです。自動再生や無限ループにも対応しています。

公式サイト
Felicity

Owl Carousel 2

タッチやスワイプにも対応したフルカスタマイズ可能なjQueryスライダープラグインです。

jQueryプラグインの中にはCSS3でしか動かないものも多くありますが、Owl Carousel 2は古いブラウザやCSS2でのフォールバックもサポートしています。

また、Owl Carousel 2は複数のプラグインを接続する形で構成されており、使わない機能を切り離しておくことで軽量化も行えます。

ホームページをできるだけ軽くしておきたい場合には、選択肢として入れてみるといいでしょう。

公式サイト
Owl Carousel 2

itemslide

ウェブサイトやアプリケーションにおけるインタラクティブなユーザー体験を実現するための強力なツールです。

タッチ操作に対応したスライダーを簡単に実装できるJavaScriptライブラリです。

特に、スマートフォンやタブレットなどのモバイルデバイスでの使用に最適化されており、上下左右のスワイプ、スクロール、クリックによるスライド操作が行えます。

公式サイト
itemslide

Swiper

モダンなデザインで高度な設定を施すことのできるjQueryスライダープラグインです。

スライダーの中のスライドにも入れ子でスライダーを設置することができたり、デスクトップではグリッド表示・モバイルではスライド表示といった複雑で高度な設定が可能です。

カルーセル表示でサムネイルを付けることもできます。

公式サイト
Swiper

それぐらいでしょうか。

こちらが使ったことがあるのはこれぐらいです。

ほかにもいろいろありますが、試してみる価値はありますよ。

では、また！