bxSliderで画像を中央にセンタリングさせる方法を解説！
bxSliderで画像を中央にセンタリングさせる方法を解説します。bxSliderで画像を中央にセンタリングさせるにはCSSで調整する必要があります。デフォルトだとずれてしまっている場合が多いので、ぜひ習得してください。
bxSliderで画像を中央にセンタリングしたい
bxSliderはデフォルトだと画像がカルーセル内で左右にずれています。
実際にどのようにずれてしまっているのかサンプルコードを用いて、挙動を確認してみましょう。
拡大していただくと横幅に対して、左に画像がずれることが分かります。
これを中央に持ってくるにはCSSで調整が必要です。
では以下の項目でbxSliderで画像を中央にセンタリングさせる方法について見ていきましょう。
bxSliderで画像を中央にセンタリングさせる方法
ではbxSliderで画像を中央にセンタリングさせる方法について解説します。
横方向で真ん中に持ってくる方法
bxSliderで横方向で真ん中に持ってくる方法はとても簡単で、普段CSSで要素を真ん中に持ってくるために使うmargin: 0 auto;を用います。
では実際にサンプルコードを用いて挙動を確認してみましょう。
1つ目のサンプルコードと違い、CSSでmargin: 0 auto;を設定するだけで、拡大しても画像が真ん中に表示されていることが分かります。
縦方向で真ん中に持ってくる方法
bxSliderで縦方向で真ん中に持ってくる方法について解説します。
こちらは主にCSSのpositionプロパティによって調整します。
では実際にサンプルコードを用いて挙動を確認してみましょう。
このように画像が縦方向で真ん中にあると同時に、センタリングされていることが分かります。
解説
まずimg要素を囲んでいるli要素に対して、position: relative;また画面いっぱいに広がるようにheight: 100vh;を設定します。
そしてimg要素にはposition: absolute;、また画面中央に持ってくるためによく用いられる以下のコードを設定します。
画面中央に持ってくる
top: 50%;
left: 50%;
transform: translate(-50%, -50%);これで縦方向のみならず、画面中央に画像を持ってくることができます。
まとめ
いかがでしたでしょうか？
CSSで調整をしないとbxSliderを用いたところで、左右に画像が偏っていて、少しダサい感じになってしまいます。
ぜひここで紹介した方法を用いて、bxSliderを用いてカッコイイWEBページを作成してみてください。
