Question

我正在使用猫头鹰旋转木马＆＃39;滚动页面上的内容。在旋转木马下面，我有一个特殊的文本块。当我滚动时，我需要将此文本追加到那里，但我在jq中不够强大才能实现这一点。文本必须依赖于将位于轮播中心的元素。

例如：当我滚动并且元素编号1位于中心时，我需要添加文本：＆＃34;您好，这是第一个元素＆＃34;。当我下一个滚动时，第一个文本必须消失，而第二个轮播元素的文本必须出现。

有人知道怎么做吗？

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

在转盘中添加文字：

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

Answer 2

我为自己的问题找到了一个解决方案，也许有人将来会需要它。这就是我如何解决它：

＆＃13;

('.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());
  });

＆＃13;

滚动轮播时需要出现文本

2 个答案: