ボタンの色を変更するには、それにリンクされたカルーセルスライドをクリックしてください。

Question

私は、ブートストラップカルーセルとその上にボタンがあり、それは組織によって提供される特定のサービスを表します。

1. （これが行われます）ユーザーがボタンAをクリックすると、ボタンAにリンクされたスライドが表示され、ボタンAの色が変化してアクティブであることを示します。
2. （ここで問題があります）スライドAがスライドBまたはいずれかのいずれかに変化すると、ボタンA（スライドAにリンクされている）の色が自動的に変更され、それぞれのスライドがクリックされたことを示します。

ボタンは、それが青に変わり、それにリンクされているスライドは

を表示されます。しかし、ここで私は、次/前のコントローラを使用してスライドを変更すると、ボタンはありませんクリックしたときに、この画像で見ることができるように

をアクティブにこれは私のコードはように

<nav1> 
     <ul class="nav1"> 
      <li><a href="#" data-target="#myCarousel1" data-slide-to="0" class="image1"></a> 
      <h4>Analytics & <br> Optimization</li> 

      <li><a href="#" data-target="#myCarousel1" data-slide-to="1" class="image2"></a> 
      <h4>Design<br> Services</h4></li> 

      <li><a href="#" data-target="#myCarousel1" data-slide-to="2" class="image4"></a> 
      <h4>Web & Mobile<br> Technology</h4></li> 

      <li><a href="#" data-target="#myCarousel1" data-slide-to="3" class="image3"></a> 
      <h4>Online <br> Marketing</h4></li> 

      <li><a href="#" data-target="#myCarousel1" data-slide-to="4" class="image5"></a> 
      <h4>Cyber<br> Security</h4></li> 

      <li><a href="#" data-target="#myCarousel1" data-slide-to="5" class="image6"></a> 
      <h4>Digital<br> Transformation</h4></li> 
     </ul> 
    </nav1> 

    <div id="myCarousel1" class="carousel slide" data-ride="carousel" data-interval="false">  
     <!-- Wrapper for slides --> 
     <div class="carousel-inner">  
    <div class="item active"> 
      <div class="clearfix"><img class="img2" src="assets/images/analysis.png"> 
     </div> 
      </div> 
</div> 

どのように見えるか..です

スタイル：

.nav1 a:active, .nav1 a:focus { 
    text-decoration: none; 
    color: #8C9EFF; 
    background: #80D8FF; 
} 

私はそのGOTがslide.bs機能を行うことを信じているが、私はどのように把握することはできませんよ！

Answer 1

Javascriptの例。私はすべてのコードを持っていないので、これは限られています。

あなたはカルーセルのスライド動作を紐づけて、イメージクラスの正しいインスタンスを見つけ、それにアクティブなクラスを追加して、すでにアクティブなクラスを持つクラスを見つけてそれを削除します。

`$('#myCarousel1').on('slid.bs.carousel', function (event) { 
    var nextactiveslide = $(event.relatedTarget).index(); 
    var $btns = $(".nav1"); 
    var $active = $btns.find("[data-slide-to='" + nextactiveslide + "']"); 
    $btns.find("div[class^='image']").removeClass("active"); 
    $active.find("div[class^='image']").addClass("active"); 
});` 

注orginalソリューションは、私はちょうどあなたのクラスやIDを使用して、それを修正How to change customized carousel indicator background color?から来ました。それらは、リンク/ボタンのあなたが持っているスタイルが含まれていないとして、あなたは、次/前のコントロールを打ったとき