Bootstrap v4 Karussell nicht initialisiert

Question

Ich versuche, einen Bootstrap v4 Slider zum Laufen zu bringen.

Sein soll Text rechts vom Schieberegler haben und dieser Text soll sich mit jeder Folie ändern.

Ich habe in der erforderlichen CSS/JS hinzugefügt, aber der Slider wird nicht initialisiert.

Link to JS FIDDLE

Mein 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

im Beispiel wie Ihr Markup aussieht, ist nicht ausreichend.

Sie haben einen .carousel-inner div Container ohne .carousel-item innen. was natürlich nur eine Folie ist.

versuchen, das Beispiel von der bootstrap documentation

Ihre Innern mehr .carousel-inner divs und entfernen Sie Ihre JS Abhilfe #slide-content-x Behälter für das setzen zu befolgen.

Sie benötigen keine JS. es initialisiert sich selbst.

siehe mein Arbeits Beispiel hier: https://jsfiddle.net/y8h5oqfw/2/