slickでスライダーを作ったときに中央に配置していた画像が左に寄ってしまう場合の対処方法。
slickを導入するとimgに”display:block;”が付く。
このせいで”text-align:center;”では中央寄せにできなくなった模様(実際、Chromeの上記画面でチェックを設定を外して”display:block;”を無効化すると中央寄せになる)。
imgに”margin:0 auto;”を付けて解決。
目次
ソースコード
ちなみに、サンプルの例(= 以下の例)だとimgの幅を80%にしているせいで「左に寄る問題」が発生してしまうので、そもそもimgの幅を100%にすれば(= 横方向に目一杯広げれば)「左に寄る問題」が発生しなくなる。
HTML
slick導入前
※text-alignで中央寄せ可能
slick導入後(左に寄ってしまう)
※imgがblockになるのでtext-alignでは中央寄せ不可
slick導入後(中央に寄せる)
※marginで中央に寄せる
CSS
.outer {
width: 80%;
margin: 0 auto;
padding: 20px 20px;
border: 1px solid #f00;
}
h2 {
font-size: 32px;
text-align: center;
}
p {
font-size: 14px;
text-align: center;
margin-bottom: 20px;
}
hr {
margin:40px 0;
}
.slider, .not-slider {
border: 1px solid #00f;
}
.item {
/* slickでslider化するとimgがblockになるのでtext-alignでは中央寄せできなくなる */
text-align: center;
}
.item img {
/* 100%にしてしまえば横幅目一杯に広がるので「左に寄る問題」自体が発生しなくなる */
width: 80%;
}
.center {
/* slickでslider化するとimgがblockになるのでmarginで中央寄せにしないといけない */
margin: 0 auto;
}
jQuery
$(function(){
$('.slider').slick({
autoplay:true,
autoplaySpeed:5000,
dots:true,
});
});