我可以更改Bootstrap Carousel subElements颜色和图像以及特定幻灯片吗？

Question

我想在幻灯片放映期间在旋转木马更改下面制作三个元素。指示与元素对应的特定幻灯片。

我已经完成了我的研究，但每次我尝试实现某些代码时，它只显示或关闭所有三个元素。轮播使用CSS来激活（.active）幻灯片，就像所有三张幻灯片一次显示一样，但你只看到前面的那张幻灯片。

基本上，我每个元素有两个图像，它们是相同但不同的颜色，因此当出现一张幻灯片时，它应该切换到另一个带有一点js的src图像;我已经这样做了，但它只适用于onclick功能而不是自动选择幻灯片。

顺便说一句，我的目标是，如果用户点击prev，next，指标或间隔期间，则可以使用幻灯片触发每个元素。我已经用基本的HTML工作了，但是bootstraps内部工作对我来说似乎很难操作。

$(function() {  
// Cycles the carousel to a particular frame when clicked and changes the img

  $('#icon1').click(function() {
    $("#myCarousel").carousel(0);
    if ($("#myCarousel").carousel(0)) {
      document.getElementById('icon1').src='icon-hover.png' //this img is blue
    }

    if ($("#myCarousel").carousel(0)) {
      document.getElementById('icon3').src='icon3.png' //this img is black
    }

    if ($("#myCarousel").carousel(0)) {
      document.getElementById('icon2').src='icon2.png'
    }
  });

  //these are x3 but with different .carousel(numbers) and images in increment

  // Cycles the carousel to a particular frame when clicked and changes the text color
  $("#icon1").click(function() {
    $("#myCarousel").carousel(0); //the 0 is the slide.index/length
      if ($("#myCarousel").carousel(0)) {
        $('.element1').css('color', '#1462ba')
      }

      if ($("#myCarousel").carousel(0)) {
        $('.element2').css('color', 'black')
      }

      if ($("#myCarousel").carousel(0)) {
        $('.element3').css('color', 'black')
      }
    }); 

    //these are x3 but with different .carousel(numbers) and colors in increment
  });