bxSlider でスライドを3つ表示して中央寄せする (レスポンシブ対応)

bxSlider はとても便利なのですがちょっと作り込もうと思うとやはりCSSなどで手を入れなくてはいけません。

特によく使われるであろう、画像を3つ表示させて両端の画像を切れさせるというようなことは標準ではできないです。

なので、CSSを使って実装する必要があります。

Codepenにデモを置いておきますのでコードと動作を確認して下さい。

See the Pen Centering bxSlider (support Responsive) by Shingo Matsui (@shingorow) on CodePen.

こちらにもコードを掲載しておきます。

sample.html

<div class="slider-wrapper">
  <div class="slider">
    <div class="slider-1 slide">
      <p>Slider 1</p>
    </div>
    <div class="slider-2 slide">
      <p>Slider 2</p>
    </div>
    <div class="slider-3 slide">
      <p>Slider 3</p>
    </div>
  </div>
</div>

sample.css

body {
  margin: 0;
  padding: 0;
}
.slider-wrapper {
  overflow: hidden;
}

.slider {
  position: relative;
  left: 15vw; /* (100vw - SlideWidth) / 2 */ /* 20180210 変更 */
  overflow: visible !important;
}

.slide {
  width: 70vw !important;
  height: 150px;
}

.slide p {
  width: 80%;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
  padding: 15px;
  background-color: #999;
  color: #EEE;
}

/* bxSlider */
.bx-wrapper {
  box-shadow: none;
  border: none;
  margin: 0;
}

sample.js

$('.slider').bxSlider({
  auto: true
});

大きなポイントとしては

• スライダーの親要素で overflow:hidden
• スライダーを左に移動する。移動幅は (100vw - SlideWidth) / 2

です。

これで、ウィンドウサイズを変えても画像が3つ表示されるようになります。

スライドの幅とスライダーの移動幅は SASS で変数と式を使うと変更の際に便利ですね。

それではまた。