Creating a Dynamic Slider in Webflow

Community resources Webflow Tips
1

Hey Guys,

I recently stumbled upon this super simple way to create a dynamic slider in Webflow, I’ve seen it on quite some peoples wishlist so I made a small tutorial how to do just that!

The Slider demo on this page requires zero code. The slideshows are completely driven by markup.
All that is needed is to include jQuery and the Cycle2 plugin using script tags.

Here you go: http://dynamic-slider.webflow.io/

(note that it doesn’t work in the preview you have to check the published link)

Lot’s of love
Sidney

20 Likes
2

Wow, it’s a whole new way to make dynamic slider.
Another way to do it is to create a slider, put dynamic wraper on each slide and then use the filters.
Really interesting.

Thank you.

3 Likes
3

Hey @thangbe,

You would still need to manually add a slide after you add a new item to your collection right?

That’s the awesome part of this one, the dynamic item acts as a slide, so every time you add a new item to your collection a new “slide” is added!

2 Likes
4

I can see great potential in this. Fantastic work :slight_smile:

1 Like
5

Hi @SidneyOttelohe

I tried implementing this on my site mockup here

https://preview.webflow.com/preview/incursion?preview=094afd09714c7f1de5f28ddbe7846251

obviously I’m doing something incorrect because the slider isn’t working autoscroll

any ideas where I went wrong

thanks

Jeremy

click the menu then dossiers , i haven’t implemented the arrows yet, but that would be the next step

6

Hey @jbleroux

I’'m looking at the preview and the set-up looks fine, but it looks like you forgot to add this to your footer code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>

Add this to your footer code and you should be good to go.

7

That’s weird it’s in my footer code. I saved and published. I obviously know the slides are there Cause I saw the second slide but not autoscrolling. I wonder if it could be the chrome browser.

8

@jbleroux Hi I was having an issue with it before as well. The link you provided is no longer working but I’m guessing it was the same problem I was having. If you share it again and the published link as well that would be great.

9

https://preview.webflow.com/preview/incursion?preview=094afd09714c7f1de5f28ddbe7846251

here it is @Mikeyjay11

10

@jbleroux Can you also publish it and send the published link?

11

http://incursion.webflow.io/

1 Like
12

@jbleroux Try adding the scripts directly on the page before /body itself. Also, add this attribute to the cycle-slideshow: data-cycle-slides=“> div”. My slides weren’t autoplaying until I added it.

2 Likes
13

embed script before the body?? I will give the adding a script a try thank you

14

@Mikeyjay11 that worked . Thank you. SO I understand better what does that attribute mean?? >div ?

also for future reference for anyone else the code works in the custom code section, it doesn’t require to be embedded on the page.

15

@jbleroux Sorry lol I meant the custom code section just worded it wrong.

“Cycle2 allows you to use any type of element for the slides, it’s not solely for cycling images. However, images are the default slide type so to use other elements you need to override the slides option as show on this page. The slides option can be set to any valid jQuery selector. The default value is > img which is a selector to find all image elements that are immediate children of the slideshow container.”

1 Like
16

so by changing it to >div it selects all the divs that are immediate children in the slideshow container

17

Hey @Mikeyjay11,

You are totally right! When I first created the slider I used auto-slide, later on I created the prev/next buttons which didn’t require that attribute so I deleted it and forgot to re-add it for the tutorial.

Thanks for pointing this out, I’ve updated the tutorial with this fix!

1 Like
18

Thank you @Mikeyjay11 and @SidneyOttelohe now that I have my head wrapped around this it is working great. The previous/next suits my needs better as well.

19

@SidneyOttelohe thank you for this! I was trying to to figure out how to something like this using the CMS and your solution is perfect. I am using this for a testimonials section but want to choose which ones to display using the featured switch. Do you know of a way to make the slider honor a featured switch? My public link can be viewed here. The page with the dynamic slider is in the test folder and is called loader. Thanks.

20

Hey @Aksaunders, I’m glad to hear that!

Yes this is totally possible, you just select the dynamic list wrapper and go the it’s settings tab and set a filter like this:

Press save and you’re done!

1 Like