CODEWITHSUNDEEP
jqueryowl-carousel
tomasr
tomasr

Reputation: 367

Owl carousel dynamic param

Is there some workaround to setup params of owl carousel dynamicly? This code doesn't work (jquery error).

$('.carousel').owlCarousel({
  loop: true,
  autoplay: false,
  items: 2,
  slideBy: 2,
  dots: false,
  nav: true,
  navContainer: function(elem) {
    return '#' + $(elem).find('.some-class').prop('id');
  }
});

This doesn't finish by error, but navContainer is not set.

$('.carousel').owlCarousel({
  loop: true,
  autoplay: false,
  items: 2,
  slideBy: 2,
  dots: false,
  nav: true,
  navContainer: '#' + $(this).find('.some-class').prop('id')
});

I need to do that. Example is simplified, I would like one code for more carousels and params set from html.

Upvotes: 2

Views: 760

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

The issue with your code is because the this reference doesn't point to the parent carousel. To fix this you could loop over them using each():

$('.carousel').each(function() {
  $(this).owlCarousel({
    loop: true,
    autoplay: false,
    items: 2,
    slideBy: 2,
    dots: false,
    nav: true,
    navContainer: '#' + $(this).find('.some-class').prop('id')
  });
});

Upvotes: 1

Related Questions