Icon Slider with headline and text

I would like to build an icon slider. The headline changes depending on the icon and should fly in from the left. Likewise with the text only that it always comes in from below.

Navigation should be done by the points on the bar or by swiping. The icons should also change their size depending on their position, i.e. the middle icon is always in full size, the others are a bit smaller and slightly transparent.

the slider should have no end → loop

does anyone have an idea how I can build this? My ideas so far unfortunately didn’t really work…

this cloneable seems like the closest thing you are referring to:

For the slider itself, SwiperJS is likely the best framerwork for what you’re trying to accomplish. It will give you the ability to have multiple slides appearing simultaneously, and has some good samples of carousel-style displays.

It’s also fairly easy to integrate with Webflow’s CMS, and has good docs.

Regarding the title, that’s a bit different and complicates things. I think the approach I’d explore is;

  1. Make the title part of each slide
  2. Give it an initial state where it’s hidden off-screen
  3. Set the trigger to a click on some tiny ( even hidden ) element within the classed slide, and focus on the title as a child.

Then in your SwiperJS code, capture the slide-changed event, identify the current slide, and issue a click event on that hidden element. It should trigger the interaction OK.

thank you! The problem is when I open it in Webflow half of it is missing and the animations aren’t there :confused:

When you use a 3rd party slider ( SplideJS, SwiperJS, etc ), the Javascript that animates it will only execute in the published site. In the designer, you will see the slider content and elements in a sort of “disassembled” state that is setup for the script to utilize.

Publish the site and view the published page to see the slider in operation.