JQuery的 - 变化的背景图像根据数据乘转盘滑动时，当活性

Question

是有办法来覆盖引导传送带指示符？我想在项目处于活动状态时更改指示器的背景。

通常在引导的默认旋转木马，该指标仅仅是这样的：

它得到了与类=“活动”，但我不知道如何正确地在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 - slid.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

要更改CSS样式主动carousel-indicators，使用此选择.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>