slick sliderで画像を中央に配置したいです。

Question

前提・実現したいこと

ウェブサイトにslickを用いてスライダーを設置しようとしています。スクリプトにcenterModeを付け加えたり、cssにtext-alignを付け加えたりしたのですが、画像が中央に配置されません。どのようにすれば、slickで画像が中央に表示されるかを知りたいです。

発生している問題・エラーメッセージ

スクリプトやCSSを変更してみましたが、画像が中央に配置されません。

該当のソースコード

.slick {
	width: 100%;
	text-align: center;
	padding-top: 30px;
	margin-left: auto;
	margin-right: auto;
}
.slider {
	position: relative;
	width: 800px;
}
.sliderlogo {
	position: absolute;
	top: 320px;
	left: 180px;
	font-size: 45px;
	font-weight: bold;
	font-family: fantasy;
	letter-spacing: 4px;
	text-align: center;
	color: #ffffff;
}

---

<script type="text/javascript">
$(function() {
  $('.slider').slick({
    accessibility: true,
    autoplay: true,
    autoplaySpeed: 2500,
    vartical: false,
    centerMode: false,
    fade: true
 });
});
</script>

---

<div class="slick">
      <ul class="slider">
      <li><img src="images/img1.jpg"></li>
      <li><img src="images/img2.jpg"></li>
      <li><img src="images/img3.jpg"></li>
      <li><img src="images/img4.jpg"></li>
     </ul>
    </div>
　　 <div class="sliderlogo">
      <p>文字１</p>
      <p>文字２</p>
    </div>

試したこと

スクリプトにcenterModeを付け加えたり、cssにtext-alignを付け加えたりしました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

コードはコードブロック```で囲ってください(わからなければコード部分を選択状態にして<code>ボタンを押してください）)

Answer 1

下記で出来ませんか？

.slider {
  margin: 0 auto;
}

Comments

[mamitasu]

.slider {
margin: 0 auto;
}
をcssに付け加えたところ、ほぼレイアウトが整いました。

新たに
.slider img{
width: 100%;
}
を足したところ、ブラウザのサイズが変わってもスライダーの画像が中央配置になりました。

ありがとうございます。

Answer 2

全体的に設定する方法は見つかっていませんが。
ただ、個別に中心寄せにする方法を発見したので、書き記します。

該当する要素にidをつける等し、
paddingを付けてあげると良いです。
marginだとうまくいきませんでしたが、paddingで調整できたので、一度お試しください。

Answer 3

確認で申し訳ありませんが、
CSSをカストマイズせずともいいはずなんですが・・

詳しくは
http://uzurea.net/explanation-of-jquery-slider-slick/

Answer 4

CSSの中で、.slick　.slider　.sliderlogo　の意味が
よくわからないのですが
左を指定しているのは、.sliderlogoの中の
left:　180px；
なので、とりあえずこれをコメントアウトしていただけませんか？

Comments

[mamitasu]

.sliderlogo .slide .slick それぞれコメントアウトして試しましたが、画像が中央に配置されませんでした。どうしても左に寄ってしまいます。

Answer 5

HTML

<ul class="slick-box"> <li><img src="images/img1.jpg"></li> <li><img src="images/img2.jpg"></li> <li><img src="images/img3.jpg"></li> <li><img src="images/img4.jpg"></li> </ul>

Javascript

<script type="text/javascript"> $(function() { $('.slick-box').slick({ accessibility: true, autoplay: true, autoplaySpeed: 2500, vartical: false, centerMode: true, fade: true }); }); </script>

で中央になりませんか？

Comments

[mamitasu]

ご回答ありがとうございます。centerMode:true、に変更してみましたが、なぜか画像が左によってしまいます。どうしたらいいでしょうか？よろしくお願いいたします。