slick.jsで小さなスライダーの中身がはみ出してしまいます。

Question

slick.jsで画像より小さな枠のスライダーを作成したのですが、画像が枠から外へはみ出してしまいます。

コードは下記になります。

<div class="box">
<ul class="slider">
	<li><a href="#"><img src="./img/img-1.png"></a></li>
	<li><a href="#"><img src="./img/img-2.png"></a></li>
	<li><a href="#"><img src="./img/img-3.png"></a></li>
</ul>
</div>

$(function(){
	//スライダーの設定
	$('.slider').slick({
	    autoplay:false,
	    autoplaySpeed:5000,
	    dots:false,
	    variableWidth:true,
	    adaptiveHeight: true
	});
});

.box{
	width: 30%;
}
.box ul{
	margin:0;
	padding:15px;
	background: #fff;
}

枠のサイズに合わせて画像を小さくしたいです。

variableWidthを試したり、子要素に「width:100%;」をかけたりしてみたのですが、症状が改善しませんでした。

どなたか解決方法をご教授いただけますでしょうか？

よろしくお願いいたします。

Comments

[hwatarig]

最終的にどういう状態にしたいのですか？枠のサイズに合わせて画像が縮まればよいのでしょうか。それとも画像のサイズに合わせて枠を広げたいのでしょうか。

[TakenokoTaro]

枠のサイズに合わせて画像が縮まれば良いです

Answer 1

slickの設定からvariableWidth:true,を削除し、画像に対してwidth:100%;を指定してください。

例えば

.box img {
  width: 100%;
}

というように。

動くサンプル

Comments

[TakenokoTaro]

解決しました！ありがとうございます。