ブートストラップv4カルーセルが初期化されていません

Question

ブートストラップv4スライダを動作させようとしています。

スライダの右側にテキストがあり、このテキストは各スライドで変更されることになっています。

私は必要なCSS/JSに追加しましたが、スライダは初期化されません。

Link to 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-itemを含まない.carousel-inner divコンテナを1つ持っています。 もちろん1つのスライドだけです。

bootstrap documentation

によって提供された例に従うことを試みるには、いくつかの.carousel-innerのdivの中にあなた#slide-content-xコンテナを置き、そのためにあなたのJSの回避策を削除します。

JSは必要ありません。それは自己初期化です。

ここに私の作業例を参照してください。https://jsfiddle.net/y8h5oqfw/2/