Bootstrap v4传送带未初始化

Question

Im trying to get a Bootstrap v4 Slider to work.

Its supposed to have text to the right of the slider and this text is meant to change with each slide.

I have added in the required CSS/JS but the slider will not initialize.

Link to JS FIDDLE

My 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

looks like your markup in the example is not sufficient.

you have one .carousel-inner div container without .carousel-item inside. which of course is just one slide.

try to follow the example provided by the bootstrap documentation

put your #slide-content-x containers inside several .carousel-inner div's and remove your JS workaround for that.

you do not need any JS. it's self-initializing.

see my working example here: https://jsfiddle.net/y8h5oqfw/2/