javascript - 单击链接到它的轮播幻灯片时更改按钮的颜色

Question

我有一个 bootstrap carousel 和它上面的一系列按钮，它们代表一个组织提供的某些服务。我想在这里实现两件事:

1. (完成)当用户点击按钮 A 时，会出现链接到按钮 A 的幻灯片，并且按钮 A 的颜色会发生变化，表明它处于事件状态。
2. (此处有问题)当幻灯片 A 从幻灯片 B 或任何一个更改时，按钮 A(链接到幻灯片 A)的颜色应自动更改，表明其相应的幻灯片已被单击。

正如您在这张图片中看到的，当按钮被点击时它变成蓝色并且链接到它的幻灯片出现

但是在这里，当我使用下一个/上一个 Controller 更改幻灯片时，按钮未激活

我的代码是这样的

    <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 示例。这是有限的，因为我没有所有的代码。

您将绑定(bind)到旋转木马的滑动 Action ，然后找到图像类的正确实例并向其添加事件类，然后找到已经具有事件类的实例并将其删除。

`$('#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");
});`

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