How to build slider with static text

How To
1

Hello Bricksters!

Can you help me with mine designer idea? I got sigma file with HERO slider, which is little bit complicated for me to create with nestle slider. Or maybe isn’t but currently, I am not able to create it.

How would you approach this? I thought about transparent absolute positioned slider and static hero heading in background of this, but it will be hard to make it responsive at all resolutions. Or maybe two synchronized sliders?..

Any ideas? How would you approach this?

SnĂ­mek obrazovky 2024-04-16 v 20.48.34
SnĂ­mek obrazovky 2024-04-16 v 20.48.341920Ă—747 96.4 KB

2

just use nested carousel for custo mdesign
and use pagination

pagination in default circle but each of them actually a simple dom with border radius 100% :slight_smile:

so you can shape your bullets easily. like that

image
image1264Ă—59 41.5 KB

little bit CSS will be needed.

and for vertical bullets just rotate the pagination 90 easy :slight_smile:

for ex:

%root% .splide__pagination li{
  display:flex;
  width:100%;
}

%root% .splide__pagination{
  display:flex;
  flex-wrap:nowrap;
  width:96.6%;
}
3

Yep, that’s easy, that I know. But what about the Static Header? I don’t want to see it sliding on every slide change.