Jump to content
Search Community

Horizontal section. How make slides scroll easier?

jimmy-a test
Moderator Tag

Recommended Posts

Hello there!

 

I'm trying to create an horizontal scrollable section inside this mainly-vertical scroll site, which works fine so far, but now I need help to make the slides move easier when scrolling. What I mean is, right now you need to scroll almost the full width size of the current slide in order to go to next or prev slide, but I want to make the slides go/move/snap forth and back with less scrolling time, using either a mouse or a trackpad. I tried different snap values without the desired result.

 

I don't know for sure if the approach made in my Codepen is the right one, it's the same as in this official example:

 

See the Pen YzygYvM by GreenSock (@GreenSock) on CodePen

 

Thanks again for this support space :)

See the Pen jOWaZZV by jimmyadaro (@jimmyadaro) on CodePen

Edited by jimmy-a
Fix official Codepen embed
Link to comment
Share on other sites

19 minutes ago, ZachSaucier said:

Hey Jimmy. Just change the end value. If you want it to be twice as fast then divide it by 2:


end: () => "+=" + (document.querySelector(".container").offsetWidth / 2)

 

 

Awesome! Didn't think about that. I divide it by 8 in my real project and works like a charm. 

 

Thanks again 🙌 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...