bxsliderを使って左右チラ見せのカルーセルスライダーを実装する方法
本記事では、bxsliderを使ってメインヴィジュアルの見せ方でよくある左右チラ見せカルーセルスライダーを実装する方法について解説します。
※事前にjQueryのプラグイン・bxsliderのプラグインをCDNで読み込みましょう。
CDN参考
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- bxslider -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
実装サンプル
See the Pen
カルーセルbx-slider by Kohei (@kouk05)
on CodePen.0
コードペンを使った実装サンプルです。
幅が1000px以上のデバイスで、左右チラ見せスライダーが実装できてるかと思います。
htmlの作りは上記コードを参考に組み立ててみてください。
CSS、jQueryコードの詳細については次章より説明します。
jQueryコード
$('.bxslider').bxSlider({
slideWidth: 1000,
auto: true,
maxSlides: 3,
moveSlides: 1,
});
上記はslickの実行関数になります。セレクタにスライドさせたい要素の親要素を指定します。
以下プロパティを設定しましょう。
slideWidth
真ん中のスライダー要素の幅を指定します。
maxSlides
左右チラ見せなので３要素スライダー表示ができてれば良いので3を指定します。
moveSlides
スライドさせる要素数を指定します。今回の場合は１を指定します。
ＣSSコード
.slider {
overflow: hidden;
}
.bx-wrapper {
border: none;
box-shadow: none;
}
.bx-viewport {
overflow: visible !important;
width: 1000px !important;
margin: 0 auto;
}
@media screen and (max-width: 1000px) {
.bx-viewport {
width: 100% !important;
}
}
次にCSSを指定します。
自動生成されるbx-viewportクラスに、先ほど指定した真ん中のスライダー要素幅を!importantを追記して指定します。
また、overflow: visible !important;、margin: 0 auto;プロパティも指定しましょう。
mediaクエリを使って真ん中の要素幅以下になったら、widthの要素幅を100%に戻します。
こうする事でレスポンシブ仕様になります。
bxsliderにデフォルトでついてくるボーダーやシャドウを消したい場合はbx-wrapperクラスにborder: none;、box-shadow: none;を指定してあげれば消えます。
最後にスライダー親要素をさらにdivタグ等で囲み、そのタグにoverflow: hidden;を指定します。
上記を指定しないと、横スクロールが現れ表示が崩れます。
以上で実装完了です。
まとめ
bxsliderで自動生成されたスライダーを使ってるＥCサイトがあり、CSSだけで左右チラ見せのカルーセルに変更できないか？という案件がありました。
実装できたので本記事で備忘録として残しました。
ぜひ参考にしてみてください。
以上で解説を終わります。