How to retrieve a startup value from a plugin?

0

I'll expose the specific problem, but I've always had this doubt in a general context: I've initialized the owl carousel plugin. I had to implement a progress bar on it. However, I need to tell the transition speed = the autoplayTimeout parameter to progress bar last for the correct time. Here is the code:

var carousel = $('.owl-carousel');

carousel.owlCarousel({
  loop: true,
  margin: 10,
  nav: true,
  items: 1,
  autoplay: true,
  autoplayTimeout: 7000,
  onInitialized: startProgressBar,
  onTranslate: resetProgressBar,
  onTranslated: startProgressBar,
});

function startProgressBar() {      
  $(".slide-progress").css({
    width: "100%",
    transition: "width 7000ms linear"
  });
}

function resetProgressBar() {
  $(".slide-progress").css({
    width: 0,
    transition: "width 0s"
  });
}

How can I access the autoplayTimeout value of the plugin's initialization variable and report in the transition: "width < autoplayTimeout linear value" of the startProgressBar () function? Thank you.

    
asked by anonymous 03.10.2018 / 15:42

1 answer

0

Your variable " carousel " is defined in a global context, so I believe it can be used normally within your function.

function startProgressBar() {      
  $(".slide-progress").css({
    width: "100%",
    transition: "width "+carousel.data('owlCarousel').autoplayTimeout+"ms linear"
  });
}

If this guy carousel.data ('owlCarousel'). autoplayTimeout returns undefined or triggers some error, try using carousel.data ('owlCarousel') settings.autoplayTimeout >. It depends on the version of the plugin you are using.

    
03.10.2018 / 17:12