ブートストラップイメージがスライドされているときのdiv背景色の変更

Question

私はこのイメージのようにしたいと思います。ページ読み込みと最初のイメージが選択されると、他の4 div背景色（＃007f3d）と異なる「オンライン入場」divセクションの背景色（＃034121）。

そして、2番目のイメージが実行されているとき、「入門テスト結果」divセクションの背景色が（＃034121）に変わり、この色と他の4div背景色がこの色（＃007f3d）になります。

これは、他のすべてのイメージとdivの連続プロセスです。 Likes imageはその画像のdiv要素を示します。

私は初心者です。だから、どうやってこれを解決できるのか分かりません。ここ

ブートストラップ作業例リンク：基本的にhttp://www.bootply.com/NSXQJ8Xmy6

Answer 1

Updated bootply

、あなたはそのインデックス内でdiv elementを見つけ、bootstrap-carouselのslid.bs.carouselイベントを利用すると、現在のcarousel slideのインデックスを取得する必要があります#hot_news要素はdiv.rowになり、activeクラスが追加されます。同時に、追加する前に、他のすべてのdivsからactive classを削除します。div.row。

以下はその操作方法です。

$('#carousel-example-generic').on('slid.bs.carousel', function (e) { 
    var currentIndex = $(e.relatedTarget).index(); 
    $("#hot_news .row div.active").removeClass('active'); 
    $("#hot_news .row div").eq(currentIndex).addClass('active'); 
}); 

$(document).ready(function(){ 
    $("#hot_news .row div").eq(0).addClass('active'); //add to 0 by default on page load 
}); 

CSS

#hot_news .active{ 
    background-color: #034121; 
}