How to redeem a plugin’s startup value?

Asked

Viewed 37 times

0

I will expose the specific problem, but I always had this question in a general context: I started the Owl Carousel plugin. I had to implement a bar Progress in it. However, I need to inform the transition speed = the autoplayTimeout parameter to last the correct time. Follow 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 I could access the autoplayTimeout value of the plugin startup variable and inform on Transition: "width <VALUE OF SELF-PLAYTIMEOUT> linear" of the startProgressBar() function? Thank you.

javascript

1 answer

0

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

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

If this guy Carousel.data('owlCarousel'). autoplayTimeout return Undefined or fire some error, try to use Carousel.data('owlCarousel').settings.autoplayTimeout. It depends on the version of the plugin you are using.

  • Thank you very much Big Boss. Your reply got me going. I was able to access with the following syntax: Carousel.data('Owl.Carousel').settings.autoplayTimeout. I’ve been investing with console.log.. But when I put this concatenated the string of the property Transition "Uncaught Typeerror: Cannot read Property 'Settings' of Undefined" I don’t quite understand the "details" do js, but I think this value does not exist when I wheat the onInitialized. I’m still searching.

  • The startProgressBar function, must be called after the plugin startup (Carousel), otherwise it will not have anything to read. Where are you calling this function?

  • just below the plugin startup, if you see in the question, the function is called in the event onInitialized, provided by the plugin itself

  • @user7069 in this case, maybe it works by replacing "Carousel.data('owlCarousel')" with this (depends on the context).

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.