▼
Streaming live at 10am (PST)

How to customize the # of slides that scroll at a time in the slider component?

Design help General
#1

Hello Webflow friends,

I’m creating a cloneable rebuild of Duolingo.com and I’m having trouble making my slider work like thiers.

image
image800×71 8.13 KB

ROL: https://preview.webflow.com/preview/duolingo-remake?utm_medium=preview_link&utm_source=designer&utm_content=duolingo-remake&preview=41ceef26cfdd28e1469ea2eea97b32e7&mode=preview

Explaination:
The Webflow slider by default is set up so that when you click an arrow, the slider moves by mask-length increments. Meaning, the size of the slider mask is how far it skips ahead with each click, regardless of the size of the slide.

I want the slider to move forward a certain amount of pixels or slides with each click. On Duolingo.com the slider moves forward about two slides per click.

Any help is greatly appreciated, thank you!

Twitter @TaylorNowotny

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

#2

Webflow slider is prebuilt and not really customizable. You should look at other sliders you can integrate into your site with custom code to get what you want. Look for a carousel type slider.

#3

Solved by @AutumnLight20 (Twitter) and posted here for anyone who needs help.

“just change the site of the Slider and change the mask overflow to show”

In other words, I made the mask small (the size of two slides) and set overflow to show. Then I manually positioned the mask and the slider arrows and gave them a background fill to cover up the undesired overflow. The result looks and works just as desired.

Project link for the interested: https://duolingo-remake.webflow.io/

1 Like
#4

Hi Taylor

Thank you for posting the proposed solution to your issue. I have the same problem with a remake I’m also doing.

However, the proposed solution does not comply exactly with the functionality of the Duolingo page, the Duolingo slider stops when the last language (Chinese) appears and with the next click it restarts, in your case the slider does not stop with the Chinese but continues to advance until the Chinese reaches the mask and there it restarts, this is because the mask is the one that detects the final slider (Chinese).

So far I have not managed to make it stop the last slide as soon as it appears in the slider, I have seen this functionality in many pages (especially in ecommerce) however no one seems to explain how to do it in Webflow.

If I get how to do it I’ll write the solution here.

BTW, Thank you for publishing the Duolingo remake, it is an excellent work to learn…

1 Like