Streaming live at 10am (PST)

Slider Design & Function


#1

Hi,

I have a slider which is also acting as a navigation on a the ‘People’ section. When the slide enters the mask it displays a div and hides when leaves the mask.

I have a couple of snags which I am struggling to resolve, Screen clip

1 - Function
I would like the slider to appear infinite, currently there is a gap once you scroll to the last slide beginning / end

2 - Interaction
Would it be possible for the user to select / click one of the slides to activate rather than only using the arrows?

3 - Design
Currently the slide arrows crop over the slides at the ends. Ideally i could add a div which is smaller than the slider which would allow the slides to be hidden before the slide buttons but it is not possible to add a div within the slider / mask.

How I would like it to work (cheated by resizing screen)

Hopefully the above makes sense along.

Many thanks

Darren


Here is my public share link: https://fountech.webflow.io/staging
Read only" https://preview.webflow.com/preview/fountech?utm_source=fountech&preview=ef33e53e24185bcd0c2013a2d0d7feea


#2

@cyberdave @sabanna @Brando @bart Hi Guys - any help on this one at all or can you point me in the direction of any Ninjas who can help out?

Many thanks

Darren


#3

Hi, @thinkrandom

It looks like you already resolved those problems :+1:t3:, slides works fine on my end :clap:t3:


Please, take a look at this workshop Webflow Workshop #134: Creating a multi-column slider in Webflow

Nelson is explaining how to deal with that “gap”


Unfortunately, not


The only way to do it would be style arrow links the way that it would completely cover the area at the each end of the slider (make bigger size and set background color) and ICON inside that links style the way you have those links styled now (round+border)

Let me know if it helped.

Cheers,
Anna


#4

Hi @sabanna

Thanks for responding, super helpful as always.

I will take a look at @PixelGeek workshop and hopefully all will be revealed.

This is a real shame. We had some UAT and every test came back with the same request, I think the design leads the user to think this is a function.

I think I understand, I guess this is a workaround but the only issue is the main bkg is a gradient from left to right so if I make the arrow link bkg a solid colour I think the edges would be visible?

Also - would this also fall down with different window sizes / resolutions?

Thanks


#5

Hi @sabanna,

I finally got round to viewing @PixelGeek tutorial that you recommended regarding the gap at each end of my slider. However I don’t think this works for my set up / function as each slide has a IX2 to display / hide content - view here .

Unless I have misunderstood, any other ideas / solutions?

Many thanks

Darren


#6

Just as a reminder, this is the issue I issue I am trying to resolve, this is how the slider nav currently displays when you get to the end of the slides…

And this is how I would like it to display

Thanks,

Darren