NEW UPDATED VERSION! 🚀

Now truly 100% CMS powered!
Super easy to customise and scales up and down dynamically with 0% code.
If you like this, you'll LOVE that. ❤️

TAKE ME THERE
Made for the webflow community

CMS Powered Card Stacking Slider - Responsive

A simple vertical card stacking slider using the CMS with some custom code for the animation. Uses simple addClass and removeClass for the animation.

CLONE IT
CMS Powered Card Stacking Slider - Responsive
Place 1
And this text is also pulled directly from the CMS!!
place 2
This text is pulled from the CMS directly!
Place 3

How does it work?

The of the image animations work by adding and removing combo classes.

The base class '.stack-image' has a -20% offset.

It also has transitions set to allow the animation to be smooth.
‍

The combo class '.stack-1' is used for the front most image. Adding this class to the images will bring it forward.

The combo class '.stack-3' is used for the 3rd image. Adding this class to the images will bring it to the last position.

To pull data from the CMS, add '.text-item' to the collection ITEM. The class '.text' gets the name of item and '.sub' gets the description from the CMS.

Add item ID 'heading-title' where you want to pull the heading title into.