Question

我有一个滑块（猫头鹰滑块-https://owlcarousel2.github.io/OwlCarousel2/index.html）。滑块将图像作为项目，每张幻灯片显示3个项目。在滑块上方，我有一个标题，当该滑块中的某些项目处于活动状态时，标题将更改。

<h6>
  PROJECT PARTNERS <!-- this should changed to LOCAL PARTNER when 5th ITEM is active -->
</h6>
<div id="partner" class="partners owl-carousel">

    <div class="item">
      <img  src="/wp-content/uploads/2019/03/grey-1.jpg" style="vertical-align:middle;" width="150" height="150" alt="Partner"/>
    </div>

    <div class="item">
      <img src="/wp-content/uploads/2019/03/grey-2.jpg" style="vertical-align:middle;" width="150" height="110" alt="Partner"/>
    </div>

    <div class="item">
      <img  src="/wp-content/uploads/2019/03/grey-3.jpg" style="vertical-align:middle;" width="300" height="50" alt="Partner"/>
    </div>

    <div class="item">
      <img  src="/wp-content/uploads/2019/03/grey-4.jpg" style="vertical-align:middle;" width="300" height="50" alt="Partner"/>
    </div>

    <div class="item">
      <img  src="/wp-content/uploads/2019/03/grey-5.jpg" style="vertical-align:middle;" width="300" height="50" alt="Partner"/>
    </div>

    <div class="item">
      <img  src="/wp-content/uploads/2019/03/grey-6.jpg" style="vertical-align:middle;" width="300" height="50" alt="Partner"/>
    </div>


 </div>



<script>

    jQuery(document).ready(function() {

          jQuery('.partners').owlCarousel({
                    center: false,
                    items:1,
                    loop:false,
                    autoWidth: true,
                    margin:70,
                    responsive:{
                  600:{
                        items:3,
                    autoWidth: true,
                    margin:200
                }
            }
    });



</script>

我该怎么做？

Answer 1

 $('.partners').owlCarousel({
     center: false,
     items: 1,
     loop: false,
     autoWidth: true,
     margin: 70,
     responsive: {
         600:{
             items:3,
             autoWidth: true,
             margin:200
         }
     },
     onChange: function (event) {
         console.log(event);
         if (event.item.index == 2) {
             $("h6").text("chnaged title");
         }
    }
})

https://jsfiddle.net/vdqj60a5/1/

根据位于中心的滑块项目显示标题

1 个答案: