貓頭鷹旋轉木馬上更改不起作用

我似乎無法獲得貓頭鷹旋轉木馬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"); 
});

來源

2016-08-30 arthur

是在控制檯中的任何錯誤？ –

在Firefox中沒有任何錯誤返回給我 – arthur

如果你可以做一個小提琴，那將會很棒，所以我們可以更好地檢查那裏發生的事情。 –

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

來源

2016-08-30 01:24:30 Dekel

貓頭鷹旋轉木馬上更改不起作用

回答

相關問題