平滑滑块自适应高度取消通过asNavFor连接的滑块的同步

我有三个Slick滑块，其中一个滑块看起来像浏览器选项卡，而另外两个则位于下面，可以通过单击选项卡进行更改。在的帮助下，此方法非常有效asNavFor。有时底部滑块的幻灯片内容会更改。有时这会在滑块和它下面的元素之间创建空白。

我试图添加adaptiveHeight: true到底部滑块。现在，高度适应了内容，空白消失了。但是现在，滑块不再同步了。首先单击“下一步”，将底部滑块移动一个滑块，但不移动选项卡滑块。再次单击下一步将移动选项卡滑块，但不会移动顶部滑块。

有谁知道为什么发生这种情况或如何解决此问题的任何线索？

这是我的滑块代码：

$('.phase--top').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      // adaptiveHeight: true,
      fade: true,
      asNavFor: '.phase--tabs, .phase--tipp'
    });
    $('.phase--tipp').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      // adaptiveHeight: true,
      arrows: false,
      fade: true,
      asNavFor: '.phase--tabs, .phase--top'
    });
    $('.phase--tabs').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      asNavFor: '.phase--tipp, .phase--top',
      dots: false,
      centerMode: false,
      prevArrow: "<button type='button' class='slick-prev pull-left'></button>",
      nextArrow:"<button type='button' class='slick-next pull-right'></button>",
      focusOnSelect: true,
      responsive: [
        {
          breakpoint: 1050,
          settings: {
            slidesToShow: 2
          }
        },
        {
          breakpoint: 700,
          settings: {
            slidesToShow: 1
          }
        }
      ]
    });

编辑：第一次单击时，我在控制台中收到此错误代码：

未捕获的TypeError：i。$ list.animate不是函数

编辑2：我使用的jquery版本3.5.1和Slick Slider版本1.8.1。

这也是我的HTML的标记：

<div class="phase--outer">
    <div class="phase--tabs">
            <div class="phase--title"> 
                <img class="phase--icon" src="phase_icon">
                <img class="phase--iconb" src="phase_iconb">
                TITLE
            </div>
            <div class="phase--title"> 
                <img class="phase--icon" src="phase_icon">
                <img class="phase--iconb" src="phase_iconb">
                TITLE
            </div>
            <div class="phase--title"> 
                <img class="phase--icon" src="phase_icon">
                <img class="phase--iconb" src="phase_iconb">
                TITLE
            </div>
    </div>
    <div class="phase--top">
            <div class="phase--text"> 
                TEXT 
            </div>
    </div>
    <div class="phase--tipp">
            <div class="phase--tipptext"> 
                <img class="phase--tippicon" src="icon_bulb">TIPP:
                <div class="phase--tipp-text">TIPPTEXT</div>
            </div>
    </div>
</div>