slickスライダー複数設置で2つ目のスライダーのスマホ表示だけスライダーにならない。

やりたいこと

１つのページ内にスライダーの複数（3つ程度）設置をしたいです。
１つめは1枚ずつ画像が変わるスライダー、２、３つ目はカルーセルスライダーにしたいです。

その際、２つ目のスライダーがPC表示では問題なくスライダー機能が実現できたのですが、
スマホサイズでの表示の際に、画像が全て縦並びで、複数回繰り返してしまいます。
dotは押せますが、縦に並んだ画像が少しずつ横に動くような挙動です。

試したこと

.contentWrap や　.contentWrap-inner　で
flexboxを使っているため、それが関係あるかもとしれないと思いコメントアウトしたりしましたが解決しませんでした。

1つめのスライダーをコメントアウトすると、希望に近い動きになりましたが
classは被っておらず、（下記だと、sliderとsliderContent　にclass名分けています。）
原因が分からず困っております。

html
1
2　　　　<section>
3          <ul class="slider">
4            <li><a href="#"><img src="images/slider01.png" alt="スライダー1"></a></li>
5            <li><a href="#"><img src="images/slider02.png" alt="スライダー2"></a></li>
6            <li><a href="#"><img src="images/slider03.png" alt="スライダー3"></a></li>
7            <li><a href="#"><img src="images/slider04.png" alt="スライダー4"></a></li>
8          </ul>
9        </section>
10        <section class="contentWrap">
11          <div class="contentWrap-inner">
12            <ul class="sliderContent">
13              <li class="contentArea">
14                <div class="contentArea__image">
15                  <img src="images/contentImage01.png" alt="">
16                </div>
17              </li>
18              <li class="contentArea">
19                <div class="contentArea__image">
20                  <img src="images/contentImage01.png" alt="">
21                </div>
22              </li>
23              <li class="contentArea">
24                <div class="contentArea__image">
25                  <img src="images/contentImage01.png" alt="">
26                </div>
27              </li>
28              <li class="contentArea">
29                <div class="contentArea__image">
30                  <img src="images/contentImage01.png" alt="">
31                </div>
32              </li>
33            </ul>
34          </div>
35        </section>
36

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/slick.min.js"></script>
    <script type="text/javascript">
      $(function() {
        $('.slider').slick({
          autoplay: true,
          autoplaySpeed: 5000,
          dots: true
        });
      });
    </script>
    <script type="text/javascript">
      $(function() {
        $('.sliderContent').slick({
            infinite: true,
            dots: false,
            arrows: true,
            slidesToShow: 3,
            slidesToScroll: 1,
            prevArrow: '<img src="images/left-attow.png" class="slide-arrow prev-arrow">',
            nextArrow: '<img src="images/right-attow.png" class="slide-arrow next-arrow">',
            responsive: [{
              breakpoint: 750,
              settings: {
                arrows: false,
                dots: true,
                slidesToShow: 1,
                slidesToScroll: 1,
              }
            }]
         });
      });
    </script>

ご教示いただきたいです。よろしくお願いいたします。