在 Bootstrap 下拉列表中显示灵活的滑块

Question

我想在 Bootstrap 下拉元素中显示一个灵活的滑块。问题是，如果从一开始就没有打开下拉菜单，则滑块将不起作用。 prev/next 按钮也不起作用。

这是我当前的代码作为工作示例：https://codepen.io/cray_code/pen/YzwdgQK

我正在使用 Bootstrap 和 slick 的默认样式。

滑块的JS代码：

$('.mini-cart-items').slick({
    dots: false,
    nextArrow: $('#minicartnext'),
    prevArrow: $('#minicartprev'),
    infinite: false,
    speed: 300,
    slidesToShow: 3,
    slidesToScroll: 1,
    mobileFirst: true,
    vertical:true,
});

如果从一开始就打开下拉菜单，则一切正常。我能做些什么吗？

Answer 1

Bootstrap 下拉菜单仅用于容纳 Bootstrap 下拉项目。您可以将其他内容放在弹出窗口中。

首先，在jQuery、Popper和Bootstrap之后添加这个脚本：

<script>
    $(function () {
        $('[data-toggle="popover"]').popover({
            html: true,
            sanitize: false,
        })
    })
</script>

其次，将data-toggle="popover"添加到触发器中。

三、使用title和data-content属性设置标题和内容

CodePen

在 Bootstrap 下拉列表中显示灵活的滑块

Display slick slider in Bootstrap dropdown

javascript

jquery

css

bootstrap-4

slick.js