簡単にスライダーが作れるjQuery 「bxSlider」

画像をスライドさせたい

浦島です、今回は簡単にスライダーが作れるjQuery 「bxSlider」を紹介します。
本当に超簡単です。

公式サイトで動作をサンプルをご覧ください。

工程

1適当な画像を3枚とindex.htmlを用意しましょう。

画像はO-DANというサイトからダウンロードしてきました。
おしゃれなフリー画像がたくさんありおすすめです。

今回はわかりやすい様に画像の名前を1、2などにしてみました。

下記のコードをindex.htmlに貼りましょう。

たったのこれだけで、スライダーが完成しちゃいます。

上のコードで自動で画像を切り替えたりなどが可能です。

様々なオプションがあるので試してみてください

オプション項目オプション説明オプション記述方法
modeスライド方法を設定
「horizontal」 横方向のスライド
「vertical」 縦方向のスライド
「fade」 フェードでの切り替え
default: ‘horizontal’
horizontal / vertical / fade
auto自動スライドの設定
default: false
true / false
speeddefault: 500数字(例:1000)
pauseスライドしてから次のスライドまでの待ち時間の設定
default: 4000
数字(例:3000)
infiniteLoopスライドをループさせるかどうかの設定
default: true
true / false
captions画像にキャプションを表示する事ができます。タグのtitleプロパティ内に記述したものが表示されます。
default: false
true / false
responsiveレスポンシブに対応するかどうかの設定
default: true
true / false
touchEnabledタッチスワイプを許可するかを設定
default: true
true / false
pagerページ送りを追加するかどうかの設定
default: true
true / false
controls前後のコントロールを追加するかどうかの設定。
default: true
true / false
nextTextnextのテキストを設定
default: ‘Next’
任意のテキスト(例:次へ)
prevTextprevのテキストを設定
default: ‘Prev’
任意のテキスト(例:前へ)
nextSelector「nextボタン」を自分で用意する場合にjQueryセレクタで指定
※指定するとデフォルトのボタンは表示されなくなる
任意のクラスやID(例:’#next-btn’)
prevSelector「prevボタン」を自分で用意する場合にjQueryセレクタで指定
※指定するとデフォルトのボタンは表示されなくなる
任意のクラスやID(例:’#prev-btn’)
useCSSスライドにCSSアニメーションを使用するかどうかの設定
default: true
true / false
easingスライドのイージングの設定
default:なし
useCSSがtrueの場合
‘linear’, ‘ease’, ‘ease-in’, ‘ease-out’, ‘ease-in-out’, ‘cubic-bezier(n,n,n,n)’useCSSがfalseの場合
‘swing’, ‘linear’
autoDirectionスライドの方向
default: ‘next’
‘next’, ‘prev’
autoHoverスライドをホバーした時に、スライドを一時的に止めるかどうかの設定
default: false
true / false
minSlides(カルーセル設定)一度に表示させる最小数を設定
default:なし
数字(例:1)
maxSlides(カルーセル設定)一度に表示させる最大数を設定
default:なし
数字(例:4)
moveSlides(カルーセル設定)一度のスライド時に移動するスライド数数字(例:4)
slideWidth各スライドの幅を指定数字(例:400)

以上、簡単にスライダーが作れるjQuery 「bxSlider」の紹介でした。

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)