光滑的滑块在引导下拉菜单中不起作用答案

【问题标题】：Slick slider doesn't work in bootstrap dropdown光滑的滑块在引导下拉菜单中不起作用
【发布时间】：2020-08-07 13:58:27
【问题描述】：

我有一个带有下拉菜单的引导导航，里面有一个女巫，我想要一个光滑的滑块。

但在打开下拉列表时它会将所有项目放在一起。

它在下拉列表之外可以正常工作，如果给下拉菜单显示类也可以。

光滑的js代码：

$(document).ready(function(){
 $('.slider').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3,
 });
});

请帮忙！

【问题讨论】：

标签： javascript html css bootstrap-4 slick.js

【解决方案1】：

只需向您的父 div 添加一个 id，然后手动调整它的大小。出现问题是因为插件在隐藏时被初始化，并且与它的大小相混淆。所以在这里，我们在滑块变得可见时强制调整大小。

<div class="dropdown-menu" aria-labelledby="navbarDropdown" id="myDropdown"></div>

$("#navbarDropdown").on("click", function() {
  $('.slider').resize();
});

工作小提琴：https://jsfiddle.net/jrkhow17/

【讨论】：

谢谢，它解决了问题，虽然有时加载需要一些时间。
有没有办法优化它或让它更快？
@CarolineOlivia 代码本身不应滞后于页面。

【解决方案2】：

问题在于幻灯片的启动。它实际上是在隐藏时发生的。在下拉列表中添加一个 id 并在此之后启动滑块。喜欢

$("#your-div").on('click',()=>{
   do the loading of slider 
})

【讨论】：