Question

我试图让Bootstrap v4 Slider工作。

它应该在滑块的右边有文字，这个文本意味着每张幻灯片都会改变。

我添加了所需的CSS / JS但滑块不会初始化。

我的JS：

<script>
        $( document ).ready(function() {
        //set here the speed to change the slides in the carousel
        $('#features').carousel({});

//Loads the html to each slider. Write in the "div id="slide-content-x" what you want to show in each slide
        $('#carousel-text').html($('#slide-content-0').html());


        // When the carousel slides, auto update the text
        $('#features').on('slid.bs.carousel', function (e) {
                 var id = $('.item.active').data('slide-number');
                $('#carousel-text').html($('#slide-content-'+id).html());
        });
});

    </script>

Answer 1

看起来像示例中的标记是不够的。

你有一个.carousel-inner div容器，里面没有.carousel-item。当然这只是一张幻灯片。

尝试按照bootstrap documentation

提供的示例进行操作

将您的#slide-content-x容器放在几个.carousel-inner div中，并删除您的JS解决方法。

你不需要任何JS。它是自我初始化的。

请在此处查看我的工作示例：https://jsfiddle.net/y8h5oqfw/2/

Bootstrap v4 Carousel未初始化

1 个答案: