获取幻灯片猫头鹰轮播的价值答案

【问题标题】：Get value of slide owl carousel获取幻灯片猫头鹰轮播的价值
【发布时间】：2020-07-22 20:25:21
【问题描述】：

我有这个猫头鹰代码

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

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

【问题讨论】：

标签： javascript owl-carousel

【解决方案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>

【讨论】：