Question

32

Owl Carousel on change not working

rated 0 times [ 35] [ 3] / answers: 1 / hits: 22109 / 8 Years ago, tue, august 30, 2016, 12:00:00

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

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jackelyn

Add To Favorites

Follow

Total Points: 303

Total Questions: 103

Total Answers: 102

Location: Turks and Caicos Islands

Member since Sun, Mar 7, 2021

3 Years ago

jackelyn questions

1 NodeJS Sendgrid 401 unauthorized

Thu, Apr 8, 21, 00:00, 3 Years ago

1 Get accessToken in auth0

Sun, Feb 28, 21, 00:00, 3 Years ago

1 How to target a styled component inside another styled component?

Fri, Jan 1, 21, 00:00, 3 Years ago

1 Refresh WooCommerce product page on added to cart

Mon, May 25, 20, 00:00, 4 Years ago

1 How to pass data fetched in _app.js to a component

Thu, Apr 30, 20, 00:00, 4 Years ago

View All

answered 8 Years ago nellykaliae · Accepted Answer

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