Streaming live at 10am (PST)

Slider - separating elements, is this even possible?


#1

Hi guys - I'm working on a carousel clothing slider thinger for my work and was wondering if it's possible to have 3 separate sliders on one pane, and the controls below. See picture for reference.

Basically, the user would control zones 1, 2, and 3, (slides) with the controls at the bottom. Up top, new images would move in overtop the background image of the dude. I'm wondering if I can stack the 3 sliders and fudge the positioning to move the arrows and copy down there but keep the sliding images up top.

Thanks for any help!


#2

Hey friends! Any advice here? Doesn't have to fully solutioned. Just a yes or no before I roll up my sleeves.


#3

Hello Richard,
I think it is possible but will be pretty much workaround.

Cheers,
Anna


#4

Thanks Anna. Giving this a go. I think so too given some positioning trickery.


#5

I actually started to recreate such slider, but, got more work to do, so, I am sorry. pensive I will back to that try when I will have a free time. Hope soon wink


#6

@richard_knight4 if you give me a little time I can recreate it smile


#7

Thanks guys! I've made some headway. Just running into some z-indexing problems with the clickable areas.


#8

Well, in general, slider#3 should be at the bottom, then slider#2 and on the top - slider#1. But it is hard to tell clear. @Arthur will be available only tomorrow (it is night in his place now), but I know he already has some results. smiley


#9

You guys are rockstars. Thanks so much for taking time out of your busy schedules. Here's as far as I got today. Gonna give it another go tomorrow.

http://ski-carousel-mobile.webflow.io/

Getting closer. Have a good night.


#10

All right. I have no idea why the arrows are clickable / touchable but the jacket CTA isn't. There's something about the stacking context that's just not clicking in my head. sweat

Preview for structure:
https://preview.webflow.com/preview/ski-carousel-mobile?preview=26966c5fa1d34a8e0db53437d1d79ab5

Edit: starting again.


#11

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.