滚动旋转木马时需要显示文字

Question

我使用'猫头鹰旋转木马'在我的页面上滚动内容。在旋转木马下面，我有一个特殊的文本块。当我滚动时，我需要这个文本附加到那里，但是我没有足够强大的jq来实现这一点。 文本必须附加依赖于将位于传送带中心的元素。

例如：当我滚动和元素编号1在中心，我需要这将附加文本：“你好，这是第一个元素”。 然后当我滚动下一个，第一个文本必须消失，而第二个轮播元素的文本不得不出现。

有没有人知道如何做到这一点？

// I'm using a plugin Owl Carousel 2.2.1 
 

 
$('.projects-carousel').owlCarousel({ 
 
    loop:true, 
 
    margin:30, 
 
    nav:true, 
 
    center:true, 
 
    responsive:{ 
 
     0:{ 
 
      items:1 
 
     }, 
 
     1600:{ 
 
      items:2, 
 
      stagePadding:75 
 
     } 
 
    } 
 
});

<div class="owl-carousel projects-carousel"> 
 
    <div class="projects-Wrapper"> 
 
     <div class="projects-img-wrapper"> 
 
      <a class="popup-youtube" href="#"><img src="img/projects/1.png" alt="Jey The Dog"></a> 
 
     </div> 
 
    </div> 
 
    <div class="projects-Wrapper"> 
 
     <div class="projects-img-wrapper"> 
 
     <a class="popup-youtube" href="#"><img src="img/projects/2.png" alt="Jey The Cat"></a> 
 
     </div> 
 
    </div> 
 
</div> 
 

 

 

 
<div class="text-block"> 
 
    <!--Here have to append a text, but i also dont know on which way to connect between element in carousel and its text... --> 
 
</div>

Answer 1

我发现我自己的问题的解决方案，也许有人未来将需要它。这就是我如何解决它：

('.projects-carousel').owlCarousel({ 
 
    loop:true, 
 
    margin:30, 
 
    nav:true, 
 
    center:true, 
 
    mouseDrag:false, 
 
    touchDrag:false, 
 
    navText: ["<i class='fa fa-long-arrow-left'></i>","<i class='fa fa-long-arrow-right'></i>"], 
 
    items: 3 
 
    }); 
 
    
 
    
 
//By default, places content of central carousel's element into the page. 
 
$('.projects-h3 h3').html($('.center .project-content h3').html()); 
 
    $('.projects-text p').html($('.center .project-content p').html()); 
 

 
/* Finds central element in .PROJECTS carousel(by '.center' class which is part of owl carousel plugin) every time when 
 
navigation button used and replaces the text content with a needed text. 
 
*/ 
 
$(".projects-carousel .owl-nav").click(function(){ 
 
    $('.projects-h3 h3').html($('.center .project-content h3').html()); 
 
    $('.projects-text p').html($('.center .project-content p').html()); 
 
    });

Answer 2

添加文本的转盘内：

<div class="owl-carousel projects-carousel"> 
    <div class="projects-Wrapper"> 
     <div class="projects-img-wrapper"> 
      <a class="popup-youtube" href="#"><img src="img/projects/1.png" alt="Jey The Dog"></a> 
     </div> 
     <p>Text you'd like here</p> 
    </div> 
    <div class="projects-Wrapper"> 
     <div class="projects-img-wrapper"> 
     <a class="popup-youtube" href="#"><img src="img/projects/2.png" alt="Jey The Cat"></a> 
     </div> 
     <p>Text you'd like here</p> 
    </div> 
</div> 

然后位置使用CSS：

.projects-Wrapper { 
    position: relative; 
} 

.projects-Wrapper p { 
    position: absolute; 
    width: 100%; 
    text-align: center; 
    top: 25%; 
}