点击owl-prev / owl-next，用信息更改div

Question

我有一个旋转木马，底部有一个框，显示有关旋转木马中图片的信息。我需要这样做，当你点击旋转木马的箭头（owl-prev和owl-next）时，它必须改变图片，同时它必须改变信息框。

 <div class="textCarousel col-md-24 col-sm-24 col-xs-24">
       <div class="projectInfo visibleFrame">
            <a href=""><img id="arrowBrowseDown" src="propertiesImages/arrowBrowseDown.jpg" alt="arrow"/></a>  
            <div class="col-md-6 col-sm-12 col-xs-24">
              <h1>client</h1>
              <p>Quadrant Construction</p>
          </div> 
             <div class="col-md-6 col-sm-12 col-xs-24">
              <h1>project</h1>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
          </div> 
             <div class="col-md-6 col-sm-12 col-xs-24">
              <h1>Utilitas</h1>
              <p class="utilitasItem">Saved Cost<span class="utilitasSpec">£10k Electric</span></p>
              <p class="utilitasItem">Timescales<span class="utilitasSpec">Achieved</span></p>
               <p class="utilitasItem">Budget<span class="utilitasSpec">331</span></p>
          </div> 
             <div class="col-md-6 col-sm-12 col-xs-24">
              <h1>testimonial</h1>
              <p class="testimonialText">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
          </div> 
            </div>
           <div class="projectInfo">
            <a href=""><img id="arrowBrowseDown" src="propertiesImages/arrowBrowseDown.jpg" alt="arrow"/></a>  
            <div class="col-md-6 col-sm-12 col-xs-24">
              <h1>client 2</h1>
              <p>Quadrant Construction</p>
          </div> 
             <div class="col-md-6 col-sm-12 col-xs-24">
              <h1>project 2</h1>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
          </div> 
             <div class="col-md-6 col-sm-12 col-xs-24">
              <h1>Utilitas 2</h1>
              <p class="utilitasItem">Saved Cost<span class="utilitasSpec">£10k Electric</span></p>
              <p class="utilitasItem">Timescales<span class="utilitasSpec">Achieved</span></p>
               <p class="utilitasItem">Budget<span class="utilitasSpec">331</span></p>
          </div> 
             <div class="col-md-6 col-sm-12 col-xs-24">
              <h1>testimonial 2</h1>
              <p class="testimonialText">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
          </div> 
            </div>
           <div class="projectInfo visibleFrame">
            <a href=""><img id="arrowBrowseDown" src="propertiesImages/arrowBrowseDown.jpg" alt="arrow"/></a>  
            <div class="col-md-6 col-sm-12 col-xs-24">
              <h1>client 3</h1>
              <p>Quadrant Construction</p>
          </div> 
             <div class="col-md-6 col-sm-12 col-xs-24">
              <h1>project 3</h1>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
          </div> 
             <div class="col-md-6 col-sm-12 col-xs-24">
              <h1>Utilitas 3</h1>
              <p class="utilitasItem">Saved Cost<span class="utilitasSpec">£10k Electric</span></p>
              <p class="utilitasItem">Timescales<span class="utilitasSpec">Achieved</span></p>
               <p class="utilitasItem">Budget<span class="utilitasSpec">331</span></p>
          </div> 
             <div class="col-md-6 col-sm-12 col-xs-24">
              <h1>testimonial 3</h1>
              <p class="testimonialText">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
          </div> 
            </div>
             </div> 


and my js that does not have any sense, I know:

$(document).ready(function(){
    $(".owl-next").click(function(){
  var item = $(this).attr('class');   
    var infoBox = $(".textCarousel .visibleFrame").html;

    $('.textCarousel . visibleFrame').children('div').attr('src',infoBox);
    $("#currentImgCarousel").trigger('owl.next');
  });


 });  

事情是，.textCarousel是div的类，其中包含信息的框，每个信息（每个图片都有de class .projectInfo），我放了一个类{{1}对于第一个.visibleFrame（所以第一张图片），我的理论是，每次点击.owl-next它会将类.projectInfo移动到下一个，相反，如果我点击.visibleFrame它会将.owl-prev类移到它之前找到的.visibleFrame div。

我不知道如何开始!!!!!因为我需要知道我在循环中有多少项而不知道如何将类移动到另一个:(使用removeClass和addClass我会讨厌，但不知道如何开始...任何帮助??? < / p>