読者です 読者をやめる 読者になる 読者になる

bxSliderでサイズの異なる画像をセンタリングする

IT プログラミング jQuery CSS

f:id:rankasan:20170315163121p:plain

サイズの異なる画像を扱える画像スライダーを探したのですが、結局のところ定番のbxSliderが良いという結論に至りました。ただし、デフォルトでは画像が左上に寄ってしまうようです。という訳で、bxSliderの簡単な使い方とセンタリング方法をご紹介

bxSlider使い方

下記サイトのView on GitubでGitHubに飛びます。Clone or Download→Download Zipでまとめてダウンロード。解凍して任意に配置します

サンプルはこんな感じ

jQueryと、bxSliderで提供されているCSS・JavaScriptを参照します。HTMLには<ul><ui>タグを記載、<ui>の中にスライダーに表示する<img>タグを書きます。後は<ul>タグを指定してbxSlider()で初期化するだけ。bxSliderは初期化時に多くのオプションを指定できます。オプションは公式のoptionsを参照下さい

デフォルトではこんな感じで左上に寄ってしまいます

画像のセンタリング

CSSにて画像がセンターに来るように位置を調整します

うまいこと表示出来ました

プライバシーポリシー