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…
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;
Make the title part of each slide
Give it an initial state where it’s hidden off-screen
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.
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.
