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

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

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

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

Codepin

光滑的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 
    })
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2021-11-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-09-03
      相关资源
      最近更新 更多