在 Bootstrap 下拉菜单中显示光滑的滑块

Question

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

这是我当前的代码作为一个工作示例：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