Slick Slider adaptiveHeight 使通过 asNavFor 连接的滑块去同步

Question

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

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

有人知道为什么会发生这种情况或我该如何解决这个问题吗？

这是我的滑块代码：

$('.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
          }
        }
      ]
    });

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

Uncaught TypeError: i.$list.animate is not a function

编辑 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>

Answer 1

老实说，我从未尝试过这个特定的设置，但总是将 adaptiveHeight 与 fade 一起使用（就像你所做的那样）箭头显示在大滑块上，而不是小滑块上。我可以想象带有箭头的 multi-slide 滑块和带有 adaptiveHeight 的 single-slide 滑块之间的一些奇怪的碰撞或不兼容问题。

关于您的设置的一些问题：

您使用哪个版本的 Slick？
您使用哪个版本的jQuery？
您是直接将图像用作幻灯片还是将它们包裹在其他元素中？

第三个问题是因为目前的Slick版本（1.8.1）在直接使用<img />作为幻灯片时存在问题。在那种情况下，slidesToScroll 属性无法正常工作，并且表现为 slidesToShow 的倍数。此外，infinite 属性在这种情况下也不起作用。

我创建了一个 Pen Slick Slider - Multiple Synced，它似乎可以正常工作。我希望这至少能有所帮助。

Slick Slider adaptiveHeight 使通过 asNavFor 连接的滑块去同步

Slick Slider adaptiveHeight desynchronizes sliders connected via asNavFor

javascript

jquery

slider

slick.js