bxSliderのよく使っているカスタマイズ5選

bx1

お仕事ではbxSliderをよく使うのですが、毎回似たようなカスタマイズを行うことが多いため、コピペで済ませられるようによく使っているカスタマイズをまとめてみました。

本家はこちら
(最近Internal Server Error連発して超重い...)

AD

基本のHTMLとCSS

HTML

jQueryのロードとjquery.easing.js、jquery.bxslider.min.jsを読み込みます。
特別な理由がなければ</body>前に記述します。

bxSliderのイージングはCSS(cubic-bezier)でも定義できるのでjquery.easingは不要…と言いたいところですが、cubic-bezierでイージングを定義した場合IE9で動作しなくなります。IE9を除外できる場合はjquery.easingは不要です。

CSS

CSSについてはbxslider.cssが同梱されていますが、個人的にはあまり使い勝手がよくないと思うので自分で一から書いています。

ローディングとページャー、コントロール(左右の矢印)を以下のCSSで定義します。
ごくシンプルなものですので、制作するサイトデザインに合わせて色や形状の修正を行ったほうがいいでしょう。

ローディングはSingle Element CSS Spinners様よりお借りしました。

また、bxSliderの実行前に画像がでろーんと表示されてしまうのを避けるために対象となる要素(ここではul)をopacity:0で見せないようにしています。

Example1. 基本的なもの

特にカスタマイズすることなく普通に設置する場合のサンプルです。

DEMO

ex1
HTML

CSS

Javascript

Example2. 横幅いっぱい

よく見かけるやつ。

DEMO

ex2
HTML

CSS

.bx-viewportがインラインでoverflow:hidden;となっているので、これをvisibleにします。

Javascript

overflow:visble;にするだけで設置すると、最後の画像のときに次の画像(つまり1枚目)が表示されません。
これを回避するためにmaxSlidesオプションで次の画像を1枚余計に置き、さらに全体の横幅を画像の枚数+415%としてカラム落ちを防ぎます。

Example3. 横幅いっぱいで前後が半透明

これもよく見かけるやつです。

DEMO

ex3
HTML

CSS

各画像をopacity:0.5;で半透明にします。
後ほどJavascript側で真ん中に来る画像をopacity:1;にします。

Javascript

onSlideBeforeはスライドのアニメーション始動前、onSlideAfterはアニメーション完了後に実行される関数です。
始動前にopacity:0.5にし、完了後にopacity:1にする、という処理を行っています。

Example4. オリジナルのキャプションをつける

bxSliderはデフォルトでもtitle属性をキャプションとして表示することができますが、文字に装飾を入れたり改行を入れたりすることができません。
そこでキャプション用のdivを用意し、スライド上に表示させます。

DEMO

bx4
HTML

div.bxslider_captionがキャプションです。

CSS

キャプションの位置や配色によっては大きく書き直す必要があります。

Javascript

キャプションの高さがスライドによって異なる場合を考慮し、

キャプションをopacity:0に→高さを取得→高さを0に→opacity:1と取得した高さへのアニメーションを同時に実行

という処理を入れています。

Example5. GalleryViewみたいなやつ

サムネイル+大きな画像というギャラリーです。

GalleryViewという見た目もクールなギャラリープラグインがあったのですが、何年もメンテナンスされておらず公式サイトも消えてしまいました。
古すぎるライブラリを使い続けるのはあまりいいことではないと思いますので、Githubには残っているとはいえ今後の制作で使用するのはあまりお勧めできません。

DEMO

bx5
HTML

div.bxslier5_photoに大きな画像が入ります。
imgのdata-photo属性に大きな画像のパスを入れています。
リンクを設置すると大きな画像へリンクが設置されます。要望が多いと思うので対応しました!!w

CSS

Javascript

スライド実行前にdiv.bxslier5_photo imgを透明にし、srcを書き換えてフェードインさせる、という順番で画像を差替えています。
ちょっとパワープレー感あります(;´∀`)

まとめ

次回はmode: 'vertical'のときのカスタマイズもまとめてみようと思います。

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

コメントはまだありません。