I can't seem to get the owl carousel onchange function to fire off. Here's a snippet of the relevant code, any ideas?

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");
});

I can't seem to get the owl carousel onchange function to fire off. Here's a snippet of the relevant code, any ideas?

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");
});

• javascript
• jquery
• owl-carousel
• owl-carousel-2

• is any error in the console? – Tamil Selvan C Commented Aug 30, 2016 at 1:00
• No errors returning for me in firefox – Arthur Commented Aug 30, 2016 at 1:01
• It would be great if you can make a fiddle so we can better examine what happens there. – Bla... Commented Aug 30, 2016 at 1:21

1 Answer 1

The autoplay should be all lower case, and also note that there is not slideSpeed and paginationSpeed options.

Here is a working version:

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/OwlCarousel2/2.1.6/assets/owl.carousel.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/OwlCarousel2/2.1.6/assets/owl.theme.default.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare./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>