CMS Slider : A solution using pagination

[zbrah (Mazette.co)]

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.

Finally delete the text from pagination

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 :
https://webflow.com/website/thecmsslider

[vincent (Vincent Bidaux)]

Neat! Great idea, and it works surprisingly well.

[matthewpmunger]

@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.

Seamless pagination with "pjax"

Using the jquery-pjax library, it is possible set up paginated collections in a way that browsing feels snappier. Demo: seamless-pagination Quick version of how jquery-pjax works: Listen for clicks on links with a certain selector Instead of going to the link, load the html data in the background Replace the specified chunk of html Use history.pushState to update the URL, so that refreshing the page / sharing a url works as expected In this demo, everything inside the #seamless-replace div w…

[zbrah (Mazette.co)]

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

[matthewpmunger]

No doubt! The seamless pagination made me super happy.

[n3tworth (Nikol' Moira)]

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

[zbrah (Mazette.co)]

Ahah great ! You’re welcome @n3tworth

[Fathom]

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.

[zbrah (Mazette.co)]

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

[Fathom]

@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

Not 100% true. I built one that works well based on @PixelGeek’s multicolumn slider exercise Creating a multi-column slider in Webflow - YouTube 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.

[mauribazan]

love this!!! really smart solution, thank you!!! and thanks webflow for pagination!!

[Fathom]

You might like this better: Multi-column dynamic horizontal scrolling from CMS
Took a while to get it sorted but it works well.

[KarelRosseel82 (Karel Rosseel)]

nice but how to set image under it so you can click on a thumbnail to see the full picture? the way lightbox works? thx look to www.mms.com choose the menuitem ‘characters’ and click on one of the characters’.
thx to try it work on your example… http://www.mms.com/us/characters/red

[Fathom]

Tricky to get the positioning right. A fixed position modal would work but might not style very well.

[zbrah (Mazette.co)]

Hey @KarelRosseel82,

On the mms example you show it’s a new page on every slide.
So that’s not complicated at all.
Footer menu where you click are just simple links to another page.
i’ve made you an example here.
https://mmslider.webflow.io/
Project here
https://preview.webflow.com/preview/mmslider?utm_source=mmslider&preview=338fde062a3857a5a18dccfdc7071009

[KarelRosseel82 (Karel Rosseel)]

hi…the problem is that each item must be a collection item because there are sentences around the image.

my full project on https://preview.webflow.com/preview/mms-karel?utm_source=mms-karel&preview=1edb394323ea06a4b181ebf35315f5bf

please can look again to my problem… I need arrows left and right.

I also have more problem topics on Problem slideshow the same as http://www.mms.com/#home

[zbrah (Mazette.co)]

Hey @KarelRosseel82, ok so you want your client to be able to add a new mms from the collection ? Or the number of mms is fixed and you won’t add more ?
Can you please create a topic dedicated to your question and @zbrah me on it i ll take a look.
Have a nice day,

[KarelRosseel82 (Karel Rosseel)]

@zbrah The number is fixed but I want to scroll by arrow between the mm-charachters the way www.mms.com works… thx

[ClubduMidi (Daan)]

Big fat YAY!! thank you for fixing this