获取幻灯片 owl 轮播的价值

Question

我有这个Owl代码

 <script>
        $(document).ready(function() {

            $("#owl-demo").owlCarousel({
                items:1,
                autoplay:true,
                autoplayTimeout:3500,
                loop:true,

            });

        });
    </script>
        <div id="owl-demo" class="owl-carousel owl-theme">
            <div class="item">
                 <img id="city-img" width="100%" class="back-img-city" src="img/city.png" />
 <img id="img-river" width="100%" class="back-img-river" src="img/river.png" />
            </div>
        </div>

我能以某种方式编写这样的脚本吗:

<script>

if(current owl slide is 2){
alert("Your slide is 2. Congrats");
}
</script>

意思是，例如，如果它的第二张幻灯片在屏幕上，则发出警报。

Answer 1

尝试使用 changed.owl.carousel 事件

$(document).ready(function() {

  $("#owl-demo").owlCarousel({
    items: 1,
    autoplay: true,
    autoplayTimeout: 3500,
    loop: true
  }).on('changed.owl.carousel', function(event) {
    if (event.page.index + 1 == 2) {
      alert("Your slide is 2. Congrats");
    }
  })

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous"
/>

<div id="owl-demo" class="owl-carousel owl-theme">
  <div> Your Content 1</div>
  <div> Your Content 2</div>
  <div> Your Content 3</div>
</div>

获取幻灯片 owl 轮播的价值

Get value of slide owl carousel

javascript

owl-carousel