Creating a Dynamic Slider in Webflow

Community resources Webflow Tips
21

I got it to work following your last post. It turns out I had set the featured switch filter on the dynamic list instead of the wrapper. Thanks again.

22

@SidneyOttelohe my slider is working great but I have a small z-index problem. When I view the slider on mobile devices, part of my slider shows above my slide out navigation despite the fact that according to the z-index of the associated elements, it absolutely should not show above the navigation. Can you take a look? Public link is here. Thanks.
EDIT: Section containing the slider was set to flex and all is right with the world.

2 Likes
23

Hi @SidneyOttelohe,

First of all thanks for your great work. I followed your tutorial to apply the Slider but it doesn’t work.

I’m building a Website for a Tattoo Studio and i need of a Slider in HomePage which shows the last News.
Could you help me please.

Below the read-only link to Website:
https://preview.webflow.com/preview/superstardestroyer?preview=4b263427b480f4f902e591b25b66c47f

Thanks in advance.
Nicolò

24

A slider is a webpage element used to highlight a group of selected posts. The slider displays one post at a time, transitioning from one to the next automatically or at the click of a button. Often, the slider looks like a fancy slideshow located near the top of your site. In fact, a slideshow is a type of slider.

25

Hi @SidneyOttelohe,

Thanks for sharing this dynamic slider. I’m also having trouble getting it to work. Other than a few different styling options, I think I’ve copied what you’ve done exactly. Could you take a look and see what I’m missing? Below are the read-only and published links:

https://preview.webflow.com/preview/richard-young-gallery-2?preview=3720620a55e185ccfc41f89914e0b024
http://richard-young-gallery-2.webflow.io/exhibition/a-kind-of-magic-a-celebration-of-freddie-mercurys-70th-birthday

Many thanks
Gavin

26

This is great. My only issue with it is that you cannot edit it very well in the editor. Meaning, you can’t preview the slides unless you publish it, since it’s using code… Which might be a pain to explain to a client.

But, until Webflow makes a dynamic slider, this will work fine!

PS. I did try doing this organically by placing a dynamic list inside each slide, but as Sidney pointed out, you have to manually add slides since you can’t place a dynamic list inside the slider Mask to filter out each slide… Too bad!

29

Using this for testimonials over at swiftgalleries.com, thanks so much for the tutorial!

Made a few changes, in case anyone else is interested in some other tweaks you can use.

  • data-cycle-fx=fadeout (for a fade in and out instead of a slider transition)
  • data-cycle-speed=400 (turns out this is the speed of the transition, not how long each slide is visible)
  • data-cycle-pause-on-hover=true (pause the slider on hover)
  • data-cycle-timeout=15000 (keep each slide visible for 15 seconds before transitioning to the next slide)
1 Like
30

Hey @SidneyOttelohe,
I just added this to my site to display a rotating series of testimonials. Only issue I’m running into is the longer testimonials overlap the content below it on the page. How do I get it to just push the following content down (expand the container that houses the testimonial)?

Here’s a screenshot:

396×530 168 KB

And my share link: Webflow - swift20

31

Thanks for putting this up for us to use @SidneyOttelohe. I am trying to implement dynamic sliders like you have made but for multiple different collections.

i.e.: Multiple Properties has a Single Slider with Multiple Unique Images. And they should be editable by a client.

Aside from creating a new collection for each Property Slider, can anyone think of a way to do that?

Pinging @Waldo as well who offered to help as well!

32

@Pascal_T Could you please update your reply with some more information so we can help you faster? Things like your read-only link & screenshots really helps us to help you faster :slight_smile:

How to share a read-only link:

Thanks in advance! :slight_smile:

33

Here is the use case, we have @SidneyOttelohe’s dynamic slider placed inside a Listings Collection page. Each Listing would like to have its own unique images shown in the slider when someone views a Listing.

I’m thinking of 2 possible ways to do that logically… Each Listing has its own Slider Collection with images inside those OR there’s a way to use Sidney’s slider collection but filter out the images on the slider based on which Listing page it’s on.

Any thoughts? I have to build a site with 12 different properties and each one will have its own slider image set.

Here’s the preview link:
https://preview.webflow.com/preview/dynamic-slider-491450?preview=08b39730c0683e8474f9ecf7a2d4e0ea

1 Like
34

I was able to make dynamic sliders for each Property by adding a dynamic list inside each slide element, using a filter to set a conditional (Current Property only + 1st, 2nd, 3rd, etc image displayed) and using an empty picture for the dynamic image.

This method allows the client to modify the slide image for each Property from inside the editor.

Look at the Property Template page here for an example: https://preview.webflow.com/preview/dynamic-slider-for-collections?preview=6b95a0c336a27de1becda74c447ade01

2 Likes
35

Hi

I tried this tutorial and it worked very well.
Now … I want to use this method for several sections on one page but by just duplicating the slider I run into the obvious problem that my arrow buttons trigger all the sliders as they have all the same class. What should I do to be able to use your method multiple times on one page?

Thank you for the great tutorial and hopefully you know a way around.

EDIT: Found it … Changed class names in the custom div attributes panel

36

Just what the doctor ordered! Thank you!

2 Likes
37

hey.
first of all thank you @SidneyOttelohe for this amazing feature. definitely something that has been needed for a long time. i have one question. is it really only possible to get the slider working if you add both lines of 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>

my custom jquery functions dont work anymore after adding the first line of code. i dont really now why. isnt jquery already being loaded inside of webflow by default?

thanks for help!
jaro

38

Ah sorry that’s my mistake, Webflow already includes jQuery - remove it and you should be fine.

1 Like
39

i just tried and it works perfectly well.
thank you!

1 Like
40

i am trying to delay every slide transition (auto, prev, next) so that i can fire an interaction before going to another slide. is anyone familiar with cycle2 aware of a way to achieve this?

41

Hi Pascal,

Thanks for sharing, I’m trying to do something similar to you, are you able to reshare your preview link?

42

@daniel_cleayweb Hey Daniel, here you go. I hope it helps!

https://preview.webflow.com/preview/dynamic-slider-for-collections?preview=6b95a0c336a27de1becda74c447ade01
http://dynamic-slider-for-collections.webflow.io/

1 Like