光滑的滑块在 bootstrap 下拉菜单中不起作用

Question

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

但它在打开下拉菜单时将所有项目放在一起。

它在下拉菜单之外工作正常，如果给下拉菜单 class 显示它也能工作。

流畅的 js 代码：

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

请帮忙！

Answer 1

只需为您的 parent div 添加一个 id，然后手动调整它的大小。出现问题是因为插件在隐藏时被初始化，这会影响它的大小。所以在这里，我们在滑块可见时强制调整大小。

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

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

工作 fiddle：https://jsfiddle.net/jrkhow17/

Answer 2

问题与幻灯片的启动有关。它实际上是在隐藏时发生的。向下拉列表添加一个 id，然后启动滑块。喜欢

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

光滑的滑块在 bootstrap 下拉菜单中不起作用

Slick slider doesn't work in bootstrap dropdown

javascript

html

css

bootstrap-4

slick.js