JQuery -根据数据滑动时改变背景图像-活动时旋转木马

Question

是否有一种方法来覆盖引导轮指示符？当某个项目处于活动状态时，我希望更改指示符的背景。

通常，在引导程序的默认旋转木马中，该指示器仅如下所示：

​

​

这与class="active"有关，但我不知道如何在js中正确地执行它。提前谢谢。

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->

    <ol class="carousel-indicators" id="div-indicators">
        <li class="ind-img1 active" id="round-image1" data-target="#myCarousel" data-slide-to="0"></li>
        <li class="ind-img2" id="round-image2" data-target="#myCarousel" data-slide-to="1"></li>
        <li class="ind-img3" id="round-image3" data-target="#myCarousel" data-slide-to="2"></li>
        <li class="ind-img4" id="round-image4" data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <div class="carousel-inner">
        <div class="item active" id="1">
            <!-- Indicators -->

            <div class="container item_quote">
                <img src="{% static 'img/landingpage/quote-1.png' %}">
            </div>

            <div class="container item_message">
                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elite.</span><br/>
                <span>Lorem ipsum dolor sit amet, consectetur </span><br/>
                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elite.</span><br/>
                <a class="proof-modal" data-toggle="modal" data-target="#lightbox">
                    Click here to enlarge image
                </a><br/>

                <span>- first testimonial</span>
            </div>

            <div class="container item_quote">
                <img src="{% static 'img/landingpage/quote-2.png' %}">
            </div>
        </div>

        <!-- more items -->
    </div>
</div> 

编辑

为了澄清这一点，我想这样做：

item[0] = img1.png
item[1] = img2.png
item[2] = img3.png

对于每一个项目，我可以更改背景图像，这取决于哪个项目是活动的。

Answer 1

我解决了。在滑动-slide.bs.carousel后，我必须使用事件处理程序"slid.bs.carousel“或”slide.bs“。

$('#Carousel').on('slide.bs.carousel', function (e) {
  var id = e.relatedTarget.id;
  switch (id) {
    case "1":
      // img1
      break;
    case "2":
      // img2
      break;
    case "3":
      // img3
      break;
    default:
      // none
  }
})

Answer 2

若要更改active carousel-indicators的css样式，请使用此选择器.carousel-indicators > li.active针对活动的选择器。

要对每个img进行预览，您需要向carousel-indicators添加相同顺序的img以创建预览效果。

​

.carousel-indicators.carousel-indicators--thumbnails li {
  width: 80px;
  height: 45px;
  margin: 0;
  border: none;
  border-radius: 0;
}

.carousel-indicators.carousel-indicators--thumbnails .active {
  background-color: transparent;
}

.carousel-indicators.carousel-indicators--thumbnails .active .thumbnail {
  border-color: red;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-8 col-md-offset-2">
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="5000">
        <!-- Indicators -->
        <ol class="carousel-indicators carousel-indicators--thumbnails">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active">
            <div class="thumbnail">
              <img src="http://lorempixel.com/900/401/" class="img-responsive">
            </div>
          </li>
          <li data-target="#carousel-example-generic" data-slide-to="1">
            <div class="thumbnail">
              <img src="http://lorempixel.com/900/402/" class="img-responsive">
            </div>
          </li>
          <li data-target="#carousel-example-generic" data-slide-to="2">
            <div class="thumbnail">
              <img src="http://lorempixel.com/900/403/" class="img-responsive">
            </div>
          </li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="http://lorempixel.com/900/401/" width="800" height="400">
            <div class="carousel-caption">
              Slide 1
            </div>
          </div>
          <div class="item">
            <img src="http://lorempixel.com/900/402/" width="800" height="400">
            <div class="carousel-caption">
              Slide 2
            </div>
          </div>
          <div class="item">
            <img src="http://lorempixel.com/900/403/" width="800" height="400">
            <div class="carousel-caption">
              Slide 3
            </div>
          </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
  </div>
</div>

​