Owlcarousel2: Smooth autoplay

[Globegitter]

Just started using this plugin and really loving it so far but one thing that would make the autoplay function look that much more beautiful in my use-case, is if it would support 'smooth' autoplay. Meaning that it doesn't stop at every new image but just smoothly carries on looping forever.

[witrin]

How about autoplayTimeout?

[Globegitter]

That is what I (after posting this bug) thought as well, but after quite extensively playing around with autoplayTimeout, fluidSpeed, smartSpeed and autoplaySpeed (though I still don't quite understand fluidSpeed and autoplaySpeed) I didn't manage to get a continuous, smooth animation. If I set autoplayTimeout to anything below 50 it just doesn't work properly and with 50 it looks very choppy.
I did manage to get something that looks quite decent in my use-case with a high value for smartSpeed. But if there would be a way to get a continuous, smooth animation that would be massively useful.

[witrin]

autoplaySpeed is the speed for the transition. In theory when you make autoplayTimeout and autoplaySpeed equal it should work. Maybe you could also post a JSFiddle? Checkout the README for a template.

[Globegitter]

Here is the JSFiddle: http://jsfiddle.net/mC8jK/2/

Also, I am not sure if I have been precise enough in describing what I wanted. While this is indeed looking much better already I wanted a kind of animation that doesn't slow down. So maybe 'constant animation' would have been a better word. Does that make sense now what I am looking for? Is that achievable somehow?

[witrin]

This is what I'm thinking too. Because it's the type of animation which doesn't fit for your needs right?

[witrin]

Well there is a tiny pause: http://jsfiddle.net/mC8jK/4/. And I was wrong about the autoplayTimeout, this has to be zero. So maybe this could be improved by using a callback instead of events for re triggering the autoplay.

[Globegitter]

The tiny pause aside, it seems there is a second problem my actual project, once I set the autoplayTimeout to 0 it doesn't work properly anymore. Sometimes for a few seconds the animation looks the same as in your jsfiddle, but sometimes it just randomly pauses for a while. The only thing I could think of, is that because there is so much other JS stuff running the performance of the animation degrades. I tried on the jsfiddle to use images instead of css but that didn't really change anything. And I mean this is still nothing compared to a proper website.
Any idea what this could come from/if my suspicion seems plausible? I could see if I can provide a short video/gif that shows how strange the animation behaves if that helps.

Also in regards the tiny pause, if you think that can be improved than this is great news. Thanks for looking into all this.

[witrin]

Well in general I think the autoplay plugin needs some refactoring, because of several issues. The problems you mentioned are hard to debug. As long as you not able to isolate the problem I can't do anything in this particular case. But on the other hand you could also create your own plugin that fits your needs. This feature is not that hard.

[Globegitter]

The touch support as well as the responsive features where other reasons why I started using this plugin and which would make implementing it myself take up a bit more time. In any case, I'll see how I will best proceed from here and thank you for your responses.

[witrin]

This is still beta. I've putted this issue into the roadmap for 2.0.0-beta4.

[sth84]

hi
I had the same issue, temporarily I changed few lines in owl.carousel.js:
991: transition: (this.speed() / 1000) + 's linear' //add "linear"

about 2496 line (Autoplay.prototype.autoplay = function() {) - i've changed clearInterval & setInterval to clearTimeout & setTimeout because Autostart didn't worked with low autoplayTimeout value.
I'm not expert with js,I don't know it is ok, but it work now and it is fluent :)

regards

[jason-engage]

Good hack thanks sth.

I added a custom setting called slideTransition: 'linear' to turn it on and off.

[cortopy]

@sth84 that sounds like a good solution. But I can't find where to make the second change. I can't find either line 2496 or the function you mention.

The current dev version has 1654 lines only? What am I missing?

[jason-engage]

@cortopy you're probably not looking at the fully compiled js including all the subscripts.

[cortopy]

It's either getting late or I'm going blind, but where is the fully compiled js? I'm looking at the src folder but I can't find js files anywhere else

[jason-engage]

@cortopy you have to make it with the gruntfile

run grunt dist in terminal

npm install grunt --global (if you don't already have it)

and if you don't have npm - you have to: brew install npm (i know its a bit of work to setup!)

[cortopy]

Ah! I only know gulp so not familiar with grunt really.

Apart from getting the exact line, I've searched in all files for "Autoplay.prototype.autoplay" but that's nowhere to be seen for me. I've also searched within the repository in Github but nothing

[jason-engage]

@cortopy i added the instructions above - the autoplay stuff is in the video js

[cortopy]

Thanks a lot for that. At least now I know how grunt works. Ok, so I've set it all up and now I'm getting the BIG file but I'm still unable to find "Autoplay.prototype.autoplay"

The closest is "Autoplay.prototype.play" but it doesn't run clearInterval & setInterval, so I'm still unable to find where to change these. For example, clearInterval only appears in the stop function

[jason-engage]

Hmm, they must have changed it. Its still in my code, which is about a month old. You should probably be able to download an older revision from git...

if there's no other setinterval in there then maybe your best bet is to grab an older version and mod that. I'm not sure what they've updated in the meantime tho...

[jason-engage]

I don't see any changes to that. What's at that line number 2496?

You can grab my file at awesome-media-gallery.en.gg/js/owl.carousel.custom.js

It has a few other mods tho. But I think they fix a couple issues with videos and custom thumbnails.

[cortopy]

Thanks so much @jason-engage !!! That's my big mystery solved. I was pretty sure it had something to do with the autoplay plugin https://github.com/smashingboxes/OwlCarousel2/blob/develop/src/js/owl.autoplay.js but just couldn't find what exactly

https://github.com/smashingboxes/OwlCarousel2/commit/c9fbddf74ed2291b0313d4e5d8add9d50de4b07c
This commit in July removed that particular function. I can see in your code you already applied the hack and your carousel looks awesome! I'll try to see how to apply this with the new version but otherwise yours works just fine. Thanks!

[0x1ad2]

@jason-engage I've found your script (http://awesome-media-gallery.en.gg/js/vendor/owl.carousel.custom.min.js) and it's working like a charm. I was wondering if you have an unminified version available?

[andyexeter]

@0x1ad2 Try removing .min from the URL ;)

[jason-engage]

@0x1ad2 @andyexeter Yep! http://awesome-media-gallery.en.gg/js/vendor/owl.carousel.custom.js

[0x1ad2]

Ah thanks didn't knew that one was available :)

[yurachumak]

thanks, it helped me

[Jaibles]

@jason-engage any chance you could share that file again please? :)

[daviddeutsch]

@jason-engage would you mind creating a PR from this? I'd love to include fixes like this one! (Would prefer to have the original author of the fix on the commit timeline rather than claiming credit for it myself.)

[jason-engage]

@Jaibles @daviddeutsch

Good idea David, I created a repo with the files.

https://github.com/jason-engage/awesome-media-carousel

Enjoy!

[daviddeutsch]

Hey, thanks @jason-engage! Still - last chance to make a Pull Request for your changes, otherwise I will make one and it ends up being my name in the commit history 😉

[jason-engage]

@daviddeutsch Thanks for the kind thinking, but I'm really not sure if this fix would integrate well with your latest OC version. I'll let you go ahead and make the magic happen. Hopefully this thread will stand in honor of my great contribution! lol

[daviddeutsch]

Alright, I will try to do it justice 😉

[DragosMocrii]

Any news on this? Is this implemented?

[bamboorocket]

Hi, I just implemented this on my site, big thanks.
BUT noted an issue with the settings of:

  slideTransition: 'linear',
  autoplayTimeout: 0,
  autoplaySpeed: 5000

The autoplayHoverPause is not working.
Any ideas how I can get the pause on hover to work again?

[KevinTaron]

thanks. love it!

[robbporto]

+1

Any news? I tested on version 2.2.1 and it's not available.

[zdarovka]

+1 Looking for a solution.

[robbporto]

Any news on this? I really wanna continue to use this plugin but I need this functionality...

[iMezied]

+1

[emanuelrosa]

+1 Yep. Looking for a solution! 🙏

[de-b]

+1 Worked like a charm. Thank you @jason-engage

[cameronepstein]

This works but be aware on mobile there are huge scrolling issues

[vojto]

I don't know if @daviddeutsch ever created PR based on @jason-engage's changes.

This worked for me: https://github.com/OwlCarousel2/OwlCarousel2/pull/2138

[dsvanidze]

How can do this with current version of OwlCarousel?

[chrisschwartze]

Also looking for this +!

[pascalporedda]

I've looked into the PR of vojito and tweaked the changes a bit. The slideTransition option will be available in the next release.

[janbabiak]

working settings for v2.3.4
autoplay : true,
slideTransition: 'linear',
autoplayTimeout : 4000,
autoplayHoverPause : false,
autoplaySpeed : 4000,

the point is, autoplayTimeout is not timeout (does not start at end of autoplay slide), but it's ticking interval, ... so autoplaySpeed (duration of slide) should not be higher than autoplayTimeout (some increasing speed logic is aplied and it works strange)

[marcohanke]

@janbabiak works great event toady. Thanks. But is there a solution to skip the "first" 4000ms?
Id like to start the scrolling instant after pageload.
Thanks