Bootstrap v4傳送帶未初始化

Question

我正在嘗試讓Bootstrap v4滑塊正常工作。

它應該在滑塊的右邊有文本，並且該文本隨每張幻燈片而變化。

我已經添加了所需的CSS / JS，但滑塊不會初始化。

鏈接到JS FIDDLE

我的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-inner沒有.carousel-item 。 當然，那只是一張幻燈片。

嘗試遵循引導文檔提供的示例

將您的#slide-content-x容器放入多個.carousel-inner div .carousel-inner並刪除您的JS解決方法。

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

在這里查看我的工作示例： https : //jsfiddle.net/y8h5oqfw/2/