Streaming live at 10am (PST)

CMS Slider : A solution using pagination


#1

Hi guys,

First of all, wish everybody a happy new year and a lot of success in your business.
Ok so that being said, i think i just found a workaround to create a cms slider very easily using pagination.

In my example i’ve created a simple collection with title, image, and description

Now you want to add the collection list, in the page you want your slider to be, and set the pagination like so :

The concept for layout is : the collection list is the slider, the items are the slides.
So you cant your slider (here the collection list) to go full width, and with a height set for example.
Your slides are 100% width and height.

Add a background image on your item and choose background image from your collection image data.
13

Finally delete the text from pagination
17
Make it vertically center using flexbox, absolute positioning or whatever you feel, custom the icons and you are done.

Also note that you can add some interaction to the slider too.
Here i’ve added a initial appearance on collection item with opacity 0, and a opacity 100% with a load trigger. Arrow left and right reset collection item to 0% opacity.
I guess you could go crazy with interaction, just keep in mind that it loads a new page when you change the slide, so keep the load trigger.
Credits goes to @sabanna and @vincent for interaction (amazing idea thanks guys).

Hope this will help you guys,
Take care,

Here is the read only project :
https://preview.webflow.com/preview/thecmsslider?utm_source=thecmsslider&preview=4dbc0e4532f35de0ad9039d339e92f8e

Published version :
https://thecmsslider.webflow.io/

Cloanable version :


#2

Neat! Great idea, and it works surprisingly well.


#3

@zbrah

Cool. I’ve wanted to try doing this too. Looks like a good proof of concept. Combine it with the seamless method below and we can create some slick cms sliders. :sunglasses:


#4

wow @matthewpmunger i’m discovering this post :open_mouth:
@forresto is too stronk :smiley:


#5

No doubt! The seamless pagination made me super happy. :star_struck:


#6

Welp…you guys just shaved HOURS off of my life. Thank you :slight_smile:


#7

Ahah great ! You’re welcome @nd-artistry


#8

Works with multi-column sliders, provided you don’t need them to be properly responsive. I can’t find way to reduce the number of columns shown in the smaller breakpoints.


#9

@Fathom maybe you should use flexbox or even grid instead of column so you could choose how much column you want for smaller breakpoints


#10

@zbrah thanks for replying. I haven’t tried GRID but given it doesn’t play that well with Collections yet, I suspect it will be buggy.
The issue with breakpoints is that the number of columns/items visible in a pagination element is defined in the settings panel (not customisable by breakpoint) not the designer.
The elusive dynamic multicolumn slider without potentially unsupported custom code seems still a way off :thinking:

Not 100% true. I built one that works well based on @PixelGeek’s multicolumn slider exercise https://www.youtube.com/watch?v=a-OUeSHCInA&t=2361s and connected each slide to a dynamic list individually with filtering. It’s works well and resizes like a champ - only problem is all the dynamic lists on a single page. There’s max of 20 Collections per page.