slickスライダーで画像表示枠可変

Question

前提・実現したいこと

slickスライダーを使用して、画像のスライドを作成しており、
画像表示数をオプションの「slidesToShow」で指定をしています。
オプションで指定された枚数以下の画像数の時、スライドの枠？
は画像数に合わせて幅を縮めたいです。

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

スライド画像の枠（今回リストなので「ul」部分になります）が
画像枚数に合わせて可変しない為困っております。

該当のソースコード

<div class="slide-box">
	<ul class="slider clearfix">
		<li>
			<a href="hogehoge.html">
				<img src="img/hogehoge.jpg">
			</a>
		</li>
		<li>
			<a href="hogehoge.html">
				<img src="img/hogehoge.jpg">
			</a>
		</li>
		<li>
			<a href="hogehoge.html">
				<img src="img/hogehoge.jpg">
			</a>
		</li>
	</ul>

</div>

<script>
$('.slider').slick({
    infinite: true,
    slidesToShow: 9,
    slidesToScroll: 1,
    autoplay: false,
    autoplaySpeed: 0,
    cssEase: 'linear',
    speed: 100,
    accessibility: true
});
</script>

試したこと

「ul」の部分がslick.cssで【display: block;】でしたので、中身によって幅が変わるように【display: inline-block;】に変更しました。「ul」部分の幅は画像の数に合わせて狭まったのですが、画像自体も半分以下に縮小されてしまいました。

画像の幅を固定するためにslickのオプション「variableWidth」を指定して、「li」の幅を指定、「img」を100％指定しましたら、「ul」部分がかなり横に長くなりブラウザからはみ出ました。
また、「li」部分も何故か自動で横幅が入りかなり大きくなってしまいました。

	.slide-box ul {
		display: inline-block;
	}
	
	.slide-box ul li {
		max-width: 80px;
	}
	
	.slide-box ul li img {
		width: 100%;
	}

<script>
$('.slider').slick({
    infinite: true,
    slidesToShow: 9,
    slidesToScroll: 1,
    autoplay: false,
    autoplaySpeed: 0,
    cssEase: 'linear',
    speed: 100,
	variableWidth: true.
    accessibility: true
});
</script>

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

同じ様な設定を行ったことがある方、改善方法ご存知の方いらっしゃいましたら、
ご教示ください。
また、足りない情報等御座いましたら、お知らせいただけますと幸いです。

宜しくお願い致します。

Answer 1

<li> タグの数を数えてオプションに入れてやれば良いのではないでしょうか。

var $slider = $('.slider');
var slideCount = $slider.children('li').length;

$slider.slick({
  infinite: true,
  slidesToShow: Math.min(9, slideCount),
  slidesToScroll: 1,
  autoplay: false,
  autoplaySpeed: 0,
  cssEase: 'linear',
  speed: 100,
  accessibility: true
});

Comments

[sakio6]

yhg様

ありがとうございます。
スライド表示領域内を画像枚数に合わせることは出来ませんでしたが、
領域内に均等に画像を並べることが出来ました。
見た目的にもこちらがよかったです。

発想を変えることで導けそうな解決方法でしたが、まったくそんな発想は出てこず勉強不足を痛感しました。
また機会が御座いましたら、ご教示頂けますと幸いです。

大変助かりました。ありがとうございました。