カルーセルをスクロールするときに表示されるテキストが必要

Question

私は 'Owl Carousel'を使用してページのコンテンツをスクロールしています。カルーセルの下に私はテキストのための特別なブロックを持っています。私がスクロールしているとき、私はそこに追加するためにこのテキストが必要ですが、私はそれが起こるように十分に強くはありません。 テキストはカルーセルの中心にある要素に依存して追加する必要があります。

たとえば、スクロールして要素番号1が中央にある場合、テキストを追加する必要があります。「こんにちは、これが最初の要素です」。 そして、次にスクロールすると、最初のテキストが消え、2番目のカルーセル要素のテキストが表示されます。

誰にも分かりやすい方法がありますか？

// 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%; 
}