【Web】よく使うjQueryプラグインの紹介（スライダー編）

2017-10-04

今はもうどのサイトでも定番になっているスライダー

CSSだけでも可能になってきましたが、細かな設定などが難しかったりします。

今回はjQueryのプラグインに絞って、特によく使う、また使用する際もわかりやすく使い勝手の良いスライダーをご紹介します。

bxSlider

スライダー系jQueryプラグインで定番中の定番であるbxSlider

ただし、注意が必要なのが画像をクリックした場合やコントロール（矢印や下の●）を触ったら自動でスライドする機能が止まってしまうというバグ？があるので注意が必要です。

＊setTimeoutやsetIntervalなどを利用すればバグは解決出来ます。

日本語で詳しく解説されているサイト↓

スライドする画像の大きさが違うなどでも大丈夫なスライダー系プラグインです。

公式サイトに使い方やオプションが記載されているのでわかりやすいです。

オプションが豊富なのも魅力的です。

日本語で詳しく解説されているサイト↓

サムネイル付きならSlider Proがオススメです。

他のbxSliderやslickでもサムネイルをつけることが可能ですが、SliderProの方が楽に作成できると思います。

他にも動画をスライダーに入れることも対応しており、スライダー内の動画に対するオプションまでも準備されています。

日本語で詳しく解説されているサイト↓

＊名称が付いていなかったので、サンプルについていた名称をつけています。

BlackFlagさんが公開されているスライダーです。

タイトル通り、画面いっぱいに並べることが出来るスライダーになります。

有りそうで無かったのでものすごく助かります。

これらのプラグインはスライドさせるのは画像だけではなく、要素をそのままスライドさせたりすることも可能です。

主にスライダー系はこの辺りを抑えておけば間違いないと思います。

それぞれCSSが違ったりするので、使い分けてみても良いかと。

今回はスライダー編だったのですが、またの機会に別のプラグインを紹介したいと思います。