フクロウカルーセルが変化しない

Question

私はフクロウのカルーセルonchange機能を発射することができません。関連するコードのスニペットはありますか？

HTML：

<div id="my-carousel" class="owl-carousel owl-theme"> 
    <div class="owl-item"><img alt="" src="pic1"/></div> 
    <div class="owl-item"><img alt="" src="pic2" /></div> 
</div> 

JS：

var my = $('#my-carousel'); 
my.owlCarousel({ 
    autoPlay: true, 
    autoplaySpeed: 4000, 
    loop: true, 
    slideSpeed: 300, 
    paginationSpeed: 400, 
    items: 1, 
    margin: 2 
}); 
my.on('changed.owl.carousel', function(e) { 
    console.log("test"); 
}); 

Answer 1

autoplayはすべて小文字で、またslideSpeedと​​オプションがないことに注意してください。コンソールにエラーが

var owl; 
 
$(document).ready(function(){ 
 
    owl = $(".owl-carousel").owlCarousel({ 
 
    autoplay: true, 
 
    autoplaySpeed: 300, 
 
    loop: true, 
 
    navSpeed: 300, 
 
    items: 1, 
 
    margin: 2 
 
    }); 
 
    owl.on('changed.owl.carousel', function(e) { 
 
    console.log("test"); 
 
    }); 
 
});

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.owl-carousel .item { 
 
    height: 120px; 
 
    background: #4DC7A0; 
 
    padding: 1rem; 
 
    list-style: none; 
 
    margin: 10px; 
 
    text-align: center; 
 
    color: white; 
 
    font-size: 20px; 
 
    line-height: 120px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.carousel.css"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.theme.default.min.css"> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/owl.carousel.min.js"></script> 
 
<!-- Set up your HTML --> 
 

 
<div class="owl-carousel"> 
 
    <div class="item"> slide1 </div> 
 
    <div class="item"> slide2 </div> 
 
    <div class="item"> slide3 </div> 
 
    <div class="item"> slide4 </div> 
 
    <div class="item"> slide5 </div> 
 
    <div class="item"> slide6 </div> 
 
    <div class="item"> slide7 </div> 
 
    <div class="item"> slide8 </div> 
 
    <div class="item"> slide9 </div> 
 
</div>