カルーセルスライダー「slick.js」で画像と文章が左に寄ってしまいます。

jQuery「slick.js」にて下記のような問題が出ています。
調べても答えがなかったので質問させてください。

下に文章の付いた画像をスライダーで複数表示したいのですが、カルーセル全体の幅に対してどうしても画像と文章が左寄りになってしまいます。画像だけのシングル表示の場合には問題がなく中央に表示されていました。

htmlとCSSを抜粋すると以下の通りです。

【html】

<div id="container">
<ul id="main_slider">
<li><a href="#"><img src="images/lazyfonz1.png" width="200px" height="200px"><time>2016.09.21</time><h2>xxxxxx</h2></a></li>
<li><a href="#"><img src="images/lazyfonz2.png" width="200px" height="200px"><time>2016.09.21</time><h2>xxxxxx</h2></a></li>
<li><a href="#"><img src="images/lazyfonz3.png" width="200px" height="200px"><time>2016.09.21</time><h2>xxxxxx</h2></a></li>
<li><a href="#"><img src="images/lazyfonz4.png" width="200px" height="200px"><time>2016.09.21</time><h2>xxxxxx</h2></a></li>
<li><a href="#"><img src="images/lazyfonz5.png" width="200px" height="200px"><time>2016.09.21</time><h2>xxxxxx</h2></a></li>
</ul>
</div>

【CSS】

ul {
list-style: none;
margin: 0;
padding: 0;
}
.container {
margin: 0 auto;
width: 100%;
max-width: 1024px;
height: auto;
position: relative;
overflow: hidden;
}
#main_slider {
margin: auto;
width: 900px;
height: auto;
}

【script】

<script>
$(function() {
$('#main_slider').slick({dots:true,slidesToShow: 3,slidesToScroll: 3,});
});
</script>

素人なりに色々調べたり試してみましたが上手くいきません。
よろしくお願いします。

No.1 回答者： fujillin 回答日時： 2016/09/23 11:32

こんにちは。

slick.jsは存じませんので、内容は知りません。
見た感じだけからの回答なのでヒントにでもなれば・・・

多分、これ（↓）のことだと思いますが、解説の例示ではDIV要素の構成で作られるのが作者の想定している対象のようです。
https://github.com/kenwheeler/slick/

なぜ、リスト形式になさっているのかよくわかりませんが、ご提示のHTMLをスライド化した時の構成は以下のようになっています。
　※ 構成のみを示しています（詳細は省略）
　※ <!-- *追加* -->はスライド化のために追加された要素

<ul id="main_slider">
　　<button class="slick-prev slick-arrow">Previous</button>
　　<div class="slick-list">　<!-- *追加* -->
　　　　<div class="slick-track">　<!-- *追加* -->
　　　　　　<li>～～</li>　<!-- *追加* -->
　　　　　　<li>～～</li>　<!-- *追加* -->
　　　　　　<li>～～</li>　<!-- *追加* -->

　　　　　　<li>～～</li>
　　　　　　<li>～～</li>
　　　　　　<li>～～</li>
　　　　　　<li>～～</li>
　　　　　　<li>～～</li>

　　　　　　<li>～～</li>　<!-- *追加* -->
　　　　　　<li>～～</li>　<!-- *追加* -->
　　　　　　<li>～～</li>　<!-- *追加* -->
　　</div>　<!-- *追加* -->
　</div>　<!-- *追加* -->
　<button class="slick-next slick-arrow">Next</button>　<!-- *追加* -->
　<ul class="slick-dots">　<!-- *追加* -->
　　<li id="slick-slide00">～</li>　<!-- *追加* -->
　　<li id="slick-slide01">～</li>　<!-- *追加* -->
　</ul>　<!-- *追加* -->
</ul>

見てもわかるように、文法違反の状態になってしまっているので、ブラウザが適宜判断して表示していることになります。
文法違反の場合の解釈は各ブラウザ依存なので、どのように表示されるかはブラウザまかせということになります。


・・・それはさておき、
＞カルーセル全体の幅に対してどうしても画像と文章が左寄りになってしまいます。
左寄りに見えるだけで、センター配置になっているのではないかと思われます。
確認のため、ご提示のCSSに
　ul li { border:1px solid red; }
などを追加してみれば、li要素は中央配置になっていることがわかると思います。
li要素のサイズ（幅）がなぜこのように解釈されるのかは、slickのスクリプトを停止した状態で表示してみればわかるのではないかと思います。

この回答へのお礼

以前に見た解説でリスト形式になっていたのでしていましたが、問題がありそうなので修正してみます。
教えて頂いたことで色々修正しながら試してみたいと思います。

悩んでいたので助かりました。
丁寧な回答ありがとうございます。

お礼日時：2016/09/23 13:05