bxSlider でカルーセル表示をするとき、1枚目（カレント）のスライドが左端に表示されます。これを中央に表示したいのですが、bxSlider のオプションにはそのような設定はありません。

常に3枚のスライドを表示して1枚目を中央に表示する方法とか、1枚を表示してその左右に前後のスライドの一部を表示する方法は様々な記事で紹介されているのですが、それらは表示枚数が固定であることが前提です。

しかし今回やりたかったのは、画面の幅に応じて一度に表示されるスライドの数が変動する場合に、1枚目（カレント）のスライドを中央に配置すること。つまり、レスポンシブ対応で画面幅が違っても各スライドのサイズは変わらず、例えば PC 画面では5枚、タブレット端末では3枚、スマホでは1枚が表示され、その1枚目（カレント）を中央に、さらに左右には前後のスライドの一部が見えている状態にしたいということです。

そして試行錯誤の末、以下の方法で実現することができました。試行錯誤の割には、CSS でマージンを設定するだけという、実に単純なものですがw

HTML

<ul class="bxslider">
<li><img src="slide1.jpg" alt="" /></li>
<li><img src="slide2.jpg" alt="" /></li>
<li><img src="slide3.jpg" alt="" /></li>
<li><img src="slide4.jpg" alt="" /></li>
<li><img src="slide5.jpg" alt="" /></li>
<li><img src="slide6.jpg" alt="" /></li>
<li><img src="slide7.jpg" alt="" /></li>
<li><img src="slide8.jpg" alt="" /></li>
</ul>

JavaScipt（コントロール等のオプションの記述は省略しています）

<script>
$(function(){
  $('.bxslider').bxSlider({
    mode: 'horizontal',
    speed: 2000,
    pause: 4000,
    minSlides: 1,
    maxSlides: 8,
    moveSlides: 1,
    slideWidth: 320,
    slideMargin: 20,
  });
});
</script>

CSS

.bxslider {
　　margin-left: 50%;
}

.bxslider li {
　　margin-left: -160px; /* 320 / 2 */
　　margin-right: 180px !important; /* 320 / 2 + 20 */
}

スライダー全体の左に 50% のマージンを設定して左端を画面中央（実際は親要素となる .bx-viewport の中央）に移動し、個々のスライドに対して ネガティブマージンで slideWidth の半分の幅を左に戻し、slideWidth の半分の幅に slideMargin を足した長さを右マージンに設定しています。bxSlider によって slideMargin の値がインラインで設定されるので !important を付けていますが、結果的に CSS で右マージンを設定するので slideMargin は設定しなくても構いません。

ところで、この記事を書いている途中で調べて分かったのですが、bxSlider と共に人気の slick や jQuery を使わない Swiper では、標準で1枚目を中央に表示するオプションがあるようです。その他のオプションも豊富に用意されているようですので、今度使ってみようと思います。