Pinned carousel, how to deal with fast scrolling

[JoeH 22 Likes (Newbie)]

Hi all,

 

Looking for some advice please or maybe a link to an example which might help me with a problem I am facing.

 

I have a pinned carousel, it is not using scrub, I simply want each slide in the carousel to transition once the user has scrolled a certain amount.

 

Ideally it would work like this, user scrolls and first slide begins transitioning, while the slide is transition any further triggering of a subsequent slide via scroll would be somehow disabled until this slide had finished transitioning.

 

The reason we need this is because the slide transition takes about 1.5 seconds, and if the user scrolls very fast it does not have time to transition through all the slides in the carousel.

 

Thanks for any tips/advice

 

[Cassie 5,649 Likes (Superhero)]

Hey there! Sounds like you may be after touch/wheel events rather than scrolling?

 

Like these demos?

See the Pen PoWapLP by BrianCross (@BrianCross) on CodePen

See the Pen kDvmC by bassta (@bassta) on CodePen

https://stackoverflow.com/questions/24217087/how-to-determine-scroll-direction-without-actually-scrolling

[JoeH 22 Likes (Newbie)]

Hi Cassie.

 

This looks like what I need.

 

However I'm wondering if there would be a way to still pin the carousel at the top of the page until the end of the carousel has been reached and then resuming the normal flow of the page?

[Cassie 5,649 Likes (Superhero)]

You could potentially initialise all the event listeners as the carousel enters and then remove them when the animation's complete.

(small note - It sounds like pretty bad UX practise though, I'd be a little frustrated if a website removed my ability to scroll normally midway through a page)

Why don't you pop together a demo and if you get stuck we can give you some pointers!