Creating a Dynamic Slider in Webflow

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

1 Like

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?

Hi Pascal,

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

@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

@Pascal_T thanks man, share link is still throwing 404 unfortunately?

A post was split to a new topic: Dynamic slider doesn’t work on https

@daniel_cleayweb Sorry I didn’t notice this earlier, here’s a new link: https://preview.webflow.com/preview/dynamic-slider-for-collections?preview=6b95a0c336a27de1becda74c447ade01

Thanks @Pascal_T I just don’t see the connection build out ? There is nothing in the share link just 1 headline?

The wrong script URL is used, and WILL break if your site is on SSL. Here are two fixes for it:

@SidneyOttelohe

This looks so promising, but I must be doing something wrong - It’s not fully functional, yet.

First, I want to confirm that I fully understanding where I should insert this script. Does this go in the Custom Code section in the Dashboard, under Header Code? Under Footer Code? I see the line and jquery script when I inspect the Published page, but the slider behavior doesn’t seem to work, despite having replicated your implementation, verbatim.

Here’s what’s going on>>
a) Within the designer environment, the Slider is pulling in and overlaying all 7 CMS Records, stacking all the texts on top of one another. This does not appear to happen in your example tutorial, nor those of other’s who’ve tried and shared their work here. I’ve tried playing with The Dynamic List Settings, alternating between setting limits on item display and keeping that unchecked, but that doesn’t seem to affect the behavior. Any sense of what’s going on?

b) Testing the slider on the published site, the text overlay issue mentioned above seems to resolve itself - ie it doesn’t stack each slide on top of eachother. However, Clicking either left or right buttons makes the entire slide disappear, with no way to recover it without refreshing the page.

c) there are other issues with the placement of the navigation buttons, and the overall centeredness of the slider relative to the the page width that I’m struggling with, and I’d love any advice you might have after taking a look.

Please let me know what you find?
Site: http://soulplay.webflow.io/
(Section in question) is Testimonials
Webflow: https://preview.webflow.com/preview/soulplay?preview=4d2d970b11d3cf1bc817ca0fc546c0c2

Thank you!

  • Derek

Hello @Everyone!
Thank you @SidneyOttelohe for this (neat) tutorial !!!

I have a small issue : my slider keeps displaying only 1 collection item (div) per clic
(instead of 5 per clic or less depending on the responsiveness).

Did I miss something?

Scroll down to the end of the page, you’ll see the Slider:
Preview: Webflow - Pumpkid | Mode Enfant
Live: http://pumpkid.webflow.io/blog/au-chaud-dans-nos-plus-beaux-manteaux-facon-fausse-fourrure

On Webflow’s Designer it displays everything fine:

But on the live site, it just displays 1 item of the collection (div) per slides:

Here’s this slider’s custom attributes:

Use this one instead of the original poster’s script (works in both http and https) :
<script src="https://malsup.github.io/jquery.cycle2.js"></script>

@SidneyOttelohe How was the Awwwards?

I’ve got the same issue with only one item showing. Not using the SSL yet.
Looks good on webflow screen but not live.

Any thoughts?

See this page:
http://galleryplace.ifmmbeta.com/retailer/bar-louie

https://preview.webflow.com/preview/galleryplace?preview=267ba7885a2652a616c284d3bc72cdd2

Oh okay so I’m not the only one.

Would anybody care to answer this multiple divs not showing issue?

Okay this script Cycle2 is so limited. That’s why it’s not working. The OP doesn’t answer either.

Nothing is irreplaceable. So, let’s switch teams:
This one should allow multiple divs per slides. It’s tricker to install but worth the time:
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>

Doc:

I have to admit, for displaying only 1 dynamic item at a time Cycle2 works like a charm. I could even give it a complete “Webflow Slider” feel:

Hi There

This is a great little work around for teaming slider content with blog posts at the sametime!

After following the tutorial, it all works great on publish, I can navigate the slides with the arrows etc. However I ideally want the slider to autoplay on load, currently it doesnt. Does anyone know what custom attribute you would set to achieve this?

Many Thanks

@Monty3540

To auto-play the slider on load,
Add to the cycle-slideshow these attributes:
data-cycle-fx=“carousel” (instead of “slide”)
data-cycle-speed=“700”
data-cycle-manual-speed=“700”
data-cycle-timeout=“7000”
data-cycle-easing=“ease”
data-cycle-carousel-visible=“1” (or 3 or 5, depending how many image to display at a time / works only with “> img” not with “> div” - an issue that’s by design and can’t be fixed easily)

2 Likes

@SidneyOttelohe Wow, this all sounds great, I still was not going through the whole process and the countless feedbacks here, but does anybody have an idea, if this will work also for fields of a single record?

With other words. I want to build a product page showing the product pictures in a slider. E. g. every product is offering 5 fields for pictures, but not every product is using all of the picture fields. So the slider should just show the pictures, which are available. Means, if a product is having two pictures, the slider is just showing two slides, if a product is having 5 pictures, the slider is having 5 slides, etc.

Any idea about that?

Thank you

Harald

For some reasons this script is not running at Safari