slickでスライダーを作ったときに中央に配置していた画像が左に寄ってしまう場合の対処方法。
slickを導入するとimgに”display:block;”が付く。
このせいで”text-align:center;”では中央寄せにできなくなった模様(実際、Chromeの上記画面でチェックを設定を外して”display:block;”を無効化すると中央寄せになる)。
imgに”margin:0 auto;”を付けて解決。
ソースコード
ちなみに、サンプルの例(= 以下の例)だとimgの幅を80%にしているせいで「左に寄る問題」が発生してしまうので、そもそもimgの幅を100%にすれば(= 横方向に目一杯広げれば)「左に寄る問題」が発生しなくなる。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<div class="outer"> <h2>slick導入前</h2> <p>※text-alignで中央寄せ可能</p> <div class="not-slider"> <div class="item"> <img src="bg_pattern1_aozora.png"> </div> </div> <hr> <h2>slick導入後(左に寄ってしまう)</h2> <p>※imgがblockになるのでtext-alignでは中央寄せ不可</p> <div class="slider"> <div class="item"> <img src="bg_pattern1_aozora.png"> </div> </div> <hr> <h2>slick導入後(中央に寄せる)</h2> <p>※marginで中央に寄せる</p> <div class="slider"> <div class="item"> <img src="bg_pattern1_aozora.png" class="center"> </div> </div> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
.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
|
1 2 3 4 5 6 7 8 9 |
$(function(){ $('.slider').slick({ autoplay:true, autoplaySpeed:5000, dots:true, }); }); |
コメントを残す