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

问题描述

我有三个Slick滑块，其中一个滑块看起来像浏览器选项卡，而另外两个则位于下面，并通过单击选项卡进行更改。在<div id="divcontenteditable" class="divTextarea slds-textarea" contenteditable onkeyup={handleChange}> <p>Device request: {assetSerialNumber}</p> <p>Device location {assetLocation}</p> <p>New text</p> </div>的帮助下，这非常完美。有时底部滑块的幻灯片内容会更改。有时这会在滑块和它下面的元素之间创建空白。

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

有没有人知道为什么发生这种情况或如何解决此问题？

这是我的滑块代码：

adaptiveHeight: true

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

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

编辑2：我使用的是jQuery 3.5.1版和Slick Slider 1.8.1版。

这也是我的HTML标记：

$('.phase--top').slick({
      slidesToShow: 1,slidesToScroll: 1,arrows: false,// adaptiveHeight: true,fade: true,asNavFor: '.phase--tabs,.phase--tipp'
    });
    $('.phase--tipp').slick({
      slidesToShow: 1,.phase--top'
    });
    $('.phase--tabs').slick({
      slidesToShow: 3,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
          }
        }
      ]
    });

解决方法

说实话，我从未尝试过此特定设置，但始终将adaptiveHeight与fade一起使用（如您所做的）和箭头在大型滑块上，而不在小型滑块上。我可以想象带有箭头的多滑动滑块和带有自适应高度的单滑动滑块之间存在一些奇怪的碰撞或不兼容问题。

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

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

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

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

javascript jquery slick.js slider