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要素スライダー表示ができてれば良いので3を指定します。

moveSlides
スライドさせる要素数を指定します。今回の場合は1を指定します。

CSSコード

.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で自動生成されたスライダーを使ってるECサイトがあり、CSSだけで左右チラ見せのカルーセルに変更できないか?という案件がありました。

実装できたので本記事で備忘録として残しました。

ぜひ参考にしてみてください。

以上で解説を終わります。

Ads

関連記事

WordPress プログラミング

【wordpress.orgにログインできず、プラグインの新規追加・外部へ接続する際の通信がうまくいかない】原因・解決方法を紹介

2022.03.25
143
HTMLCSS プログラミング

【簡単】CSSを使って要素を非表示にせず、要素内のテキストだけ見た目上消す方法

2022.01.19
94
プログラミング

webサイトで過去ページのデザイン・内容を見る方法【Wayback Machineで簡単】

2020.07.16
13
HTMLCSS プログラミング

スクロールバーをiphone、ipadでも常に表示しとく方法

2019.12.04
2245