Wood-Roots:blogHOMEJavascript201608/27bxSliderのよく使っているカスタマイズ5選Javascriptお仕事ではbxSliderをよく使うのですが、毎回似たようなカスタマイズを行うことが多いため、コピペで済ませられるようによく使っているカスタマイズをまとめてみました。Error連発して超重い...)ADs基本のHTMLとCSSHTMLjQueryのロードとjquery.easing.js、jquery.bxslider.min.jsを読み込みます。特別な理由がなければ</body>前に記述します。src="jquery.bxslider.min.js"></script></body></html>bxSliderのイージングはCSS(cubic-bezier)でも定義できるのでjquery.easingは不要...と言いたいところですが、cubic-bezierでイージングを定義した場合IE9で動作しなくなります。IE9を除外できる場合はjquery.easingは不要です。CSSCSSについてはbxslider.cssが同梱されていますが、個人的にはあまり使い勝手がよくないと思うので自分で一から書いています。ローディングとページャー、コントロール(左右の矢印)を以下のCSSで定義します。シンプルなものですので、制作するサイトデザインに合わせて色や形状の修正を行ったほうがいいでしょう。Spinners様よりお借りしました。bxSliderの実行前に画像がでろーんと表示されてしまうのを避けるために対象となる要素(ここではul)をopacity:0で見せないようにしています。基本的なもの特にカスタマイズすることなく普通に設置する場合のサンプルです。横幅いっぱいよく見かけるやつ。/></li></ul></div></div>CSS.bx-viewportがインラインでoverflow:hidden;となっているので、これをvisibleにします。!important;}Javascriptoverflow:visble;にするだけで設置すると、最後の画像のときに次の画像(つまり1枚目)が表示されません。これを回避するためにmaxSlidesオプションで次の画像を1枚余計に置き、さらに全体の横幅を画像の枚数+415%としてカラム落ちを防ぎます。横幅いっぱいで前後が半透明これもよく見かけるやつです。/></li></ul></div></div>CSS各画像をopacity:0.5;で半透明にします。後ほどJavascript側で真ん中に来る画像をopacity:1;にします。!important;}JavascriptonSlideBeforeはスライドのアニメーション始動前、onSlideAfterはアニメーション完了後に実行される関数です。始動前にopacity:0.5にし、完了後にopacity:1にする、という処理を行っています。オリジナルのキャプションをつけるbxSliderはデフォルトでもtitle属性をキャプションとして表示することができますが、文字に装飾を入れたり改行を入れたりすることができません。そこでキャプション用のdivを用意し、スライド上に表示させます。DEMOHTMLdiv.bxslider_captionがキャプションです。/>テキストテキストテキストテキストテキスト</p></div></div></li></ul></div></div>CSSキャプションの位置や配色によっては大きく書き直す必要があります。bold;}Javascriptキャプションの高さがスライドによって異なる場合を考慮し、キャプションをopacity:0に→高さを取得→高さを0に→opacity:1と取得した高さへのアニメーションを同時に実行という処理を入れています。GalleryViewみたいなやつサムネイル+大きな画像というギャラリーです。GalleryViewという見た目もクールなギャラリープラグインがあったのですが、何年もメンテナンスされておらず公式サイトも消えてしまいました。古すぎるライブラリを使い続けるのはあまりいいことではないと思いますので、Githubには残っているとはいえ今後の制作で使用するのはあまりお勧めできません。DEMOHTMLdiv.bxslier5_photoに大きな画像が入ります。imgのdata-photo属性に大きな画像のパスを入れています。リンクを設置すると大きな画像へリンクが設置されます。imgを透明にし、srcを書き換えてフェードインさせる、という順番で画像を差替えています。‘vertical’のときのカスタマイズもまとめてみようと思います。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイトCommentsコメントはまだありません。2Archive2020年92019年182018年102017年172016年202015年212014年312013年552012年50SearchSocialAboutWeb制作会社ではたらく社畜のアウトプットです。Web制作技術のほか、雑記など。当ブログと運営者についてもっと詳しく見るプライバシーポリシーContactお問い合わせは下記フォームをご利用ください。お時間がございましたらお問い合わせの前にこちらをご一読いただけますと幸いです。Wood-Roots:blog。