Creating a Dynamic Slider in Webflow

@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

Hey guys. Would someone be willing to take a look at my dynamic slider test page?

I’m using a type of slick slider so I can sync thumbnail slides to show the larger image up above, however I can’t get each individual dynamic slide to be un-synced from the rest of the dynamic content. The result is that when I click one slide, it changes all of them whereas I’m only wanting it to change the current one I am within.

I apologize if this isn’t very clear, but please navigate to the CMS portion of the live site by clicking the large red rectangle in the upper left corner to see what I’m saying. Thanks in advance for any light someone can shed on my problem!

http://slick-slider-practice.webflow.io/

Share Only Link

https://preview.webflow.com/preview/slick-slider-practice?preview=24a1f954c833c9f46347524c5b4841ae

Hi @SidneyOttelohe,

Thanks for this Dynamic Slider, we’ve been using the code for awhile and it’s worked for us. However, just this morning, the page is showing up as “unsecured script” therefore being blocked by Google Chrome and Opera. Once I tried to load the script, Google Chrome will deem the page as “not secured”

Not really sure what was happening, so I thought I’d let you know.

This happened to me as well however if you remove the HTTPS and the HTTP from the URL reference it works fine.
Just use //cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js

Hi Sidney,

I’m a little late to the game with your original post. It seems your original link is now broken. Would you be able to re-share the link with me?

Thanks!
Evan

1 Like