Как изменить два содержания Div в карусели

Question

Мне нужна помощь, чтобы изменить два содержания div в той же карусели. Ниже изображение, я пометил содержание в красном, я хочу, чтобы он изменился, когда я нажимаю кнопки правой или левой карусели.

https://jsfiddle.net/austinpeter/cg7hqk0n/

<div class="col-md-12 ourworkInfo" style="position:relative;text-align:center;height:calc(100% - 142px);overflow: hidden; display:none"> 
    <div class="col-md-12" style="padding:0"> 
    <div style="background:#66DBFF;height:50px;position:relative;padding:0;"> 
     <div class="col-md-4"> 
     <div id="ourWorkcarousel" class="carousel slidec" data-interval="false" data-ride="carousel" style="width: 50%;padding-left: 50px;padding-right: 50px;height:50px"> 
      <div class="carousel-inner" role="listbox" style="height:50px"> 
      <div class="item active" style="top:10px"> 
       Infographics 
      </div> 
      <div class="item"> 
       Interactive<br /> 
       Infographics 
      </div> 
      <div class="item"> 
       Motion<br /> 
       Graphics 
      </div> 
      </div> 
      <a class="left carousel-control cleft" href="#ourWorkcarousel" role="button" data-slide="prev" style="position:absolute;left:0"> 
      <span aria-hidden="true"> 
       <img src="assets/imgs/left_arrow.png" style="width:25px;" /> 
      </span> 
      <span class="sr-only">Previous</span> 
      </a> 
      <a class="right carousel-control cright" href="#ourWorkcarousel" role="button" data-slide="next"> 
      <span aria-hidden="true"><img src="assets/imgs/right_arrow.png" style="width:25px;" /></span> 
      <span class="sr-only">Next</span> 
      </a> 
     </div> 
     </div> 
     <div class="col-md-4"></div> 
     <div class="col-md-4"> 
     <span> 
      <img src="assets/imgs/close.png" style="width:25px;vertical-align:central;top: 10px; position: relative;right:20px;" class="pull-right" onclick="CloseourWork()" /> 
     </span> 
     </div> 
    </div> 
    </div> 
    <div class="col-md-12" style="position:relative;height:475px;overflow:hidden;top:10px"> 
    <div class="col-lg-12"> 
     <div class="col-lg-8"> 
     <div class="row"> 
      <div class="col-md-6" style="padding-right:5px;overflow:hidden;"> 
      <div class="ig-im-1" style="height:225px;position:relative;"> 
       <div class="ig-tri-1"></div> 
       <img src="assets/imgs/ig1.png" class="grayscale" style="overflow:hidden;top:0;left:0; position: absolute;width:100%" /> 
       <div class="ig-im-1-txt"> 
       Pies, charts, and information made<br />interactive, montes nascetur ridiculus<br />mus. 
       </div> 
      </div> 
      </div> 
      <div class="col-md-6" style="padding-right:5px;overflow:hidden;"> 
      <div class="ig-im-2" style="height:225px;position:relative"> 
       <div class="ig-tri-2"> 

       </div> 
       <img src="assets/imgs/ig1.png" class="grayscale" style="overflow:hidden; top:0;left:0; position: absolute;width:100%" /> 
       <div class="ig-im-2-txt"> 
       Pies, charts, and information made<br />interactive, montes nascetur ridiculus<br />mus. 
       </div> 
      </div> 
      </div> 
     </div> 
     <div class="row" style="position:relative;top:10px"> 
      <div class="col-md-12" style="padding-right:5px;overflow:hidden;"> 
      <div class="ig-im-3" style="height:225px;position:relative;"> 
       <div class="ig-tri-3"></div> 
       <img src="assets/imgs/ig3.png" class="grayscale" style="overflow:hidden; top:0;left:0; position: absolute;width:100%" /> 
       <div class="ig-im-3-txt"> 
       Pies, charts, and information made<br />interactive, montes nascetur ridiculus<br />mus. 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
     <div class="col-lg-4" style="padding-left:0;overflow: hidden; height: 460px;position: relative; left: 10px; width: 32%;"> 
     <div class="ig-im-4" style="height:475px; padding-left: 0; "> 
      <div class="ig-tri-4"></div> 
      <img src="assets/imgs/ig4.png" class="grayscale" style="overflow:hidden; top:0;left:0; position: absolute; width:100%" /> 
      <div class="ig-im-4-txt"> 
      Pies, charts, and information made<br />interactive, montes nascetur ridiculus<br />mus. 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

Вот демо, как показать/скрыть текст на основе индекса текущего слайда.

шаги:

1. Используйте slide.bs.carousel событие для обнаружения, когда slide ползунок заменить.
2. Получить индекс текущего слайда на $('.item').index(e.relatedTarget);.
3. Скрыть все .caption и показать ток на $('.caption').hide().eq(index).show();

Полный код

$('#myCarousel').on('slide.bs.carousel', function (e) { 
 
    // get the index of the slide 
 
    var index = $('.item').index(e.relatedTarget); 
 
    // hide all captions and show the caption with the item's index 
 
    $('.caption').hide().eq(index).show(); 
 
})

.carousel { 
 
    display:inline-block; 
 
} 
 

 
.caption:not(:first-child) { 
 
    display:none; 
 
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
 
    <li data-target="#myCarousel" data-slide-to="2"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img src="http://i.stack.imgur.com/Ee7Xh.jpg"> 
 
    </div> 
 

 
    <div class="item"> 
 
     <img src="http://i.stack.imgur.com/uncqm.jpg" alt="Chania"> 
 
    </div> 
 

 
    <div class="item"> 
 
     <img src="http://i.stack.imgur.com/Uv3d4.jpg" alt="Flower"> 
 
    </div> 
 
    </div> 
 

 
    <!-- Left and right controls --> 
 
    <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div>

http://jsbin.com/wuzihaj/edit?html,css,js