Help creating an auto-play slider

Hi everyone,

I’m trying to create a landing carousel which contains a series of auto-play background videos along with an ‘instagram stories’ style progress bar which allows the user to skip and click through to the next video (much like in an actual instagram story! Or on this site for example: https://www.b-reel.com/)

I’ve gotten so far however, once the user starts clicking through the slider they no longer auto-play and instead get ‘stuck’ on that particular video until the user interacts with the slider again. The user then has to commit to clicking through the slides one-by-one if they want to see more which is not the desired outcome.

Would anyone be able to advise me on how to keep the auto-play function of the slider as the default setting, whilst also allowing the user to click through the odd slide if they wish?

The preview link is here: https://objekt-website-2020.webflow.io/

And my read-only file is here: https://preview.webflow.com/preview/objekt-website-2020?utm_medium=preview_link&utm_source=designer&utm_content=objekt-website-2020&preview=feda8c3d044eb88c3ffaf7a4987852ba&mode=preview

This is my first ever webflow project, so please forgive me if I’ve committed any cardinal sins!!

Thanks!

Laura

Welcome to the community @lozza_dale!

The default functionality for the native slider element is to pause the autoplay as soon as a user hovers over the section (to allow time to interact before the slide changes) with autoplay resuming as soon as the pointer leaves that section. Currently there isn’t anyway to change this behavior unless you cover the slider element with a transparent div element, but keep in mind this will make it impossible for a user to interact with the slider in any way.

I’d recommend looking into a third part option like Slick slider which has the ability to give you much more control over the slider component, however please note that this requires custom code to implement. That said, they have some good documentation available on their site (autoplay: true and pauseOnHover: false are probably the only two settings you’ll need to pass to the slider element to get it working as expected), but if you get stuck I’m sure either myself or someone else in the community would be happy to help out.

2 Likes

Hi @mikeyevin

Thank you for the warm welcome, and for coming back to me so quickly :slight_smile:

I’m up for trying the custom code solution that you mentioned. However, as I’m not familiar with web developing or writing code, I’m not entirely sure how to implement it. If you’re able to give me any guidance on how to do this I’d greatly appreciate it!

Thanks so much,

Laura

Hi

try this project it have custom slider, you can clone it
https://responsive-card-slider.webflow.io/

let me if you need more help.

thanks

Hi @mikeyevin

I managed to work out how to add the code using the ‘embed code’ component but it didn’t seem to alter the behaviour of the slide.

I’m wondering if you might have any other ideas? :smiley:

Thanks!
Laura

Hi @color2life

Thank you for your response and for sharing that link. It’s not quite the same as the functionality I’m after. But thank you anyway.

I just went ahead and checked your read-only link but I wasn’t able to find where you added the embed code. Can you point me in the direction so I can see what you’ve included?

Hey!

Sorry I had taken it out as I’ve been trying out a few suggestions I’ve found on old threads. I’ve popped it back in now :slightly_smiling_face:

Screenshot 2020-09-02 at 18.44.18

Ah okay, you’ll need to setup your structure as well as including the code to get it working, however after some testing I was getting some weird results when trying to use Slick.

I ended up going with Swiper JS instead and you can see my example at the links below:

https://swiper-js-test.webflow.io/
Read-Only: https://preview.webflow.com/preview/swiper-js-test?utm_medium=preview_link&utm_source=designer&utm_content=swiper-js-test&preview=c5edbdfe4dbe7360fb9568799cb4ec0c&mode=preview

The animated timeline pagination doesn’t appear to be possible “out of the box” with Swiper, but the example above autoplays and continues to play when users hover or interact with the slider. There’s an example here that uses some additional code to get an animated effect per bullet, however it’s not quite the same as the example you posted so it would need to be tweaked to match what you’re referencing.

Hey @mikeyevin

Thank you for this! I applied that JS which strangely, didn’t seem to work on it’s own, but when I used it alongside some code suggested by @Andrew_Coderre in this thread and then also some code I saw on a few threads to the footer code:

then it’s very nearly working perfectly!

It no longer ‘freezes’ on a frame for a few seconds after a click which is fab. But it now doesn’t complete the full 4 seconds of the slide after a click — it seems to do about 3 or 4 seconds before jumping to the next slide, but then continues to autoplay normally again after that.

Do you have any idea why this might be happening?

Thanks so much! Really appreciate the help given by you both!

Laura

Glad your getting closer to a solution! My apologies for any confusion, the code I referenced is meant to be used as an alternative to the native Webflow slider—so you would have needed the structure I used on my project as well for the slider to function.

Since you ended up using a fix that works on the native slider element, I’d go ahead and remove the code for SwiperJS and see if that doesn’t help smooth things out. It’s strange that interacting with the slider is causing the second slider to transition just a tad faster, however the included code may be causing some conflict.

Ah, ok, I understand what you were suggesting now! Thanks :slight_smile:

I had a go with it, but couldn’t get it to work in the desired way — I think I just need to gain some more experience using webflow and custom code!

For now, I’m going to leave it as is, as I think we’re close enough.

Thanks again for all your help!