slick.jsで複数の<li>を一画面に収めたい。

前提・実現したいこと

実現したいこと
slick.jsで複数のliを一画面に収めたい。

前提1:wordpressのテーマを自作中で、slick.jsを使用しています。
前提2:slick.jsでslidesToShow: 1,のスライダーは成功しています。
前提3:slidesToShow: 2,だとうまくいきます。

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

エラーメッセージはありません。
画像が表示されるものの、なぜかスライダーになりません。

該当のソースコード

<!-- スライダー部分 -->
<ul class="slider2">
 <?php foreach ($data as $row) { ?>
  <li>
   <a href="<?php echo get_home_url(); ?>"><img src="<?php echo get_home_url(); ?>/<?php echo $row["dir"]; ?>/<?php echo $row["mode"]; ?>/a.jpg" alt=""></a>
  </li>
 <?php } ?>
</ul>

jQuery
1jQuery(function() {
2 jQuery('.slider2').slick({
3  autoplay: true,
4  autoplaySpeed: 1000,
5  speed: 800,
6  infinite: true,
7  arrows: true,
8  slidesToShow: 3,
9  slidesToScroll: 3,
10 });
11});

php
1$width=85;
2$paddind=1;
3// $dataはデータベースから持ってきたデータです。

css
1ul.slider2 {
2 width: <?php echo $width; ?>vw;
3 height: <?php echo (($width - $padding * 2 * count($selected)) / count($data)) * 1.875; ?>vw;
4}
5
6ul.slider2 li a img {
7 width: <?php echo ($width - $padding * 2 * count($data)) / count($data); ?>vw;
8 height: <?php echo (($width - $padding * 2 * count($data)) / count($data)) * 1.875; ?>vw;
9 border-radius: 20px;
10 padding: 0 <?php echo $padding / 2; ?>vw;
11 -webkit-border-radius: 20px;
12 -moz-border-radius: 20px;
13 overflow: hidden;
14}