Slider in only a few CMS pages within the same collection

Hi everyone!

I’m trying to build a CMS-powered slider following this tutorial but I’ve been encountering a few difficulties:

  1. First, I just added a slider to the CMS Template page and added images manually to each slide without using the CMS function. However, not all pages under this collection will have a slider so how can I turn visibility on/off? When I try to add a condition it says “no values to select”

Screen Shot 2023-03-08 at 11.58.58 AM

  1. Then I tried creating a new CMS Collection just for the sliders using the pagination option but it is not showing it properly. I tried tweaking the width/height but no luck. I also imagine this would be an issue since different pages would be drawing content from different CMS Collections. Is that an option for that when setting up the template page? E.g.: I want to be able to link one page to Collection Sliders 1 and another page to Collection Sliders 2.

Read-only link here.

I appreciate any help/insight on this!

Thank you,
Amanda

Hi @carvalhoasm :wave:

First, the visibility & user access feature is meant to work with the Webflow memberships feature. This is why you see No values to select

Second, currently Webflow doesn’t have a native ability to add CMS data to the Slider component. However there is a third-party option thanks to our friends at Finsweet:

Hope this helps :slight_smile:

2 Likes

On #1, you want to use the collection list’s settings for conditional visibility- that’s a different configuration than the one you’re looking at which is primarily about Membership’s and user logged-in/logged-out state.

To have an option there, you’d need to add something like a switch ( on/off ) field to your collection, and set it to on when you want your slider. Then set your slider to only appear when that’s ON.

On #2, it’s not clear what you’re trying to do in the big picture, specifically;

  • Is this a case where you have two “slider” collections, and some of your items will show one of those, some will show the other? Or are you trying to have different slider content for every item in this collection.
  • What’s in the sliders? Is it just a photo, or more complex content?
  • Do most collections have sliders, or just a few of them?
  • Are all of the sliders also pulling content from collections, or are they static?

There are different ways to accomplish what you’re after but the right one depends on questions like those.

Thank you for this, @PixelGeek! Do you have another example of a mobile menu that is not floating at the bottom of the page (I’d like to keep the hamburger menu at the top right corner).

Hi Michael,

#1 Thanks for explaining the visibility switch property. I think this solution would work if no other pages within the collection have a slider.

#2

  • Is this a case where you have two “slider” collections, and some of your items will show one of those, some will show the other? Or are you trying to have different slider content for every item in this collection. I’m trying to have different slider content for every item in the collection.
  • What’s in the sliders? Is it just a photo, or more complex content? Just images.
  • Do most collections have sliders, or just a few of them? I believe just a few of them.
  • Are all of the sliders also pulling content from collections, or are they static? Ideally, I would like them to pull content from the collections.

Actually it probably wouldn’t, becauseThe Visibility switch you’re using isn’t bindable to CMS fields, which means all of your CMS items would have to have the same setting - visible or not visible.

Regarding #2- thanks for the clarification, that’s much easier to answer.

First, you definitely do NOT want to create a separate slider element on your CMS page to support each CMS item, it would be very difficult to manage and setup properly. Plus every new CMS item you’d add would require page modifications, which is sort of the opposite of what the CMS is intended for.

Since you’re only showing images, I’d use an Image Gallery field, which can store up to 25 images per CMS item. Then figure out how to display those images in a slider.

There you MIGHT be able to CMS-bind the slider using Finsweet’s CMS Slider, however I haven’t checked to see if this can be done to an image gallery field specifically.

If that doesn’t work, you can definitely accomplish this using a 3rd party slider library like splide.js.

Thanks again. Michael! I tried doing it, the only thing is that the slider component is being copied for every single image. Do you think it might be because of the gallery feature instead of drawing each slide from different collection items?

Hi Amanda, I’m not sure what you’ve tried doing?
If you’re Finsweet’s CMS Slider, their docs will give you details on how to arrange and tag your elements properly. If you’re using splide.js, follow their examples.

As a guess, whatever approach you’re pursuing it sounds like you have the slider inside of a collection list? That would make a copy of it for each item.

Sorry, I tried Finsweet’s CMS Slider. I followed the step-by-step in the documentation but you are correct, I have the slider inside of a collection item. What should I be doing instead? Apologies for my limited knowledge, perhaps I should think of a simpler alternative for the slider!

Hi Amanda, I have not used Finsweet’s CMS slider, but I’m quite certain that you would not want your slider inside of the collection list. I’m assuming you’d simply want them as separate things, anywhere on the page.

FS typically has both docs and cloneables to make the setup easy to follow. Look for a cloneable or video if you’re not sure.

1 Like

Oh, perfect! I hadn’t seen the tutorial/clone buttons. Thank you again @michael :slight_smile:

1 Like