Carousel Slider Moving One Image at a Time

Design help General
1

Hi,

Wonder if anyone could help me a client as ask me to create a carousel slider that consists of 3 on each slide and moves one image at a time rather each slide, the same as the slider on this website:

I’ve tried to work it out myself and couldn’t. I have looked on webflow university and online tutorials on how to do this and haven’t found an answer if some could shed some light on how to do you would be a life saver!

Thank you!

2

Here is how to take control of the Slider.

You can resize the Mask element so that it doesn’t take up the whole slider. And you have to remove the overflow:hidden property of it, so that the other slides are visible. Add overflow:hidden on the slider element.

Here is the demo: slider anaotmy

Here is the sharing link so that you can check how it’s done. I’m using Flexbox to position the Mask: https://preview.webflow.com/preview/sbx?utm_medium=preview_link&utm_source=designer&utm_content=sbx&preview=3ec033cabc671d9aed325632b7d7daa3&pageId=5d74d57dfc69ff5a94dcef60&mode=preview

3 Likes
3

Thanks for this vincent, much appreciated!

One more question.

How do you add overflow:hidden on the slider element?

2 Likes
4

What’s the emulator that you are using? :confused:

5

Hey @vincent would you be able to share a new read-only link for that? Looks like exactly what I need but the link must’ve expired. Would appreciate it!

EDIT: Never mind, the written instructions worked perfectly fine, simple enough haha.

6

And you don’t need a read only link as you can CLONE the demo site right from its navbar.

7

Thanks Vincent, your demo has been most helpful.

One followup question - Is there any way to remove the blank space towards the end of the slider as you reach the last slide/image?

Description - Currently we see the first image start at the left end of the slider with a constant margin between each image as we scroll forwards. However, as we reach the last few images we see a whole lot of blank space between the last image and the right end of the slider. Looks somewhat incomplete. Ideally the user should be able to continue scrolling infinitely back to the first image without any gap between the last and first image.

Any help on closing this gap would be much appreciated. Thanks!

8

I too am having this issue. Did you find a solution for this @guptasud @vincent?

9

Hey guys, do you found a solution for @guptasud problem? That would be amazing! @vincent

10

Cool. This is on this site and it’s fully cloneable Untitled

11

Not that I know of, sorry