单击链接到其上的旋转木马幻灯片时更改按钮的颜色

Question

我有一个bootstrap轮播和顶部的一系列按钮，代表组织提供的某些服务。我想在这里做两件事：

1. （已完成此操作）当用户点击按钮A时，会出现链接到按钮A的幻灯片，并且按钮A的颜色会发生变化，表明其已激活。
2. （此处有问题）当幻灯片A从幻灯片B或其中任何一个更改时，按钮A（链接到幻灯片A）的颜色应自动更改，表示已单击其各自的幻灯片。

正如您在此图片中看到的，当点击按钮时，它会变为蓝色，并且会显示与其链接的幻灯片

但是在这里，当我使用next / prev控制器更改幻灯片时，按钮不会被激活

这是我的代码看起来像

    <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;
}

我相信它与slide.bs功能有关，但我无法弄清楚如何！

Answer 1

一个Javascript示例。这是有限的，因为我没有所有的代码。

您将转到旋转木马的幻灯片操作，然后找到图像类的正确实例并将活动类添加到它并找到具有活动类的那个并删除它。

mdl = sm.tsa.statespace.SARIMAX(ts_monthly, exog=ts_exog, order=(3,1,0)).fit()

请注意原始解决方案来自How to change customized carousel indicator background color?我刚修改它以使用您的类和ID。