Update slideshow for swipe control -...

User 244626 Photo


Registered User
811 posts

I put some time and effort into finding a way to have the slide transition effect (I think it was a cross-fade) to counter the effect of having a automatic slide transition (cross-fade) but also having the user have control to move quickly to the next slide on swipe or prev next buttons and not have to wait for the effect to expire.

What I did was use two pictures, one directly on top of the other on each slide. The bottom picture was an exact copy of the next slide top picture. I used a delay for the fade out effect on the top picture so it appears the next slide is coming in however its just ending the first slide and showing the bottom picture. (The slideshow setting is static without any transition).Then it quickly changes to the next slide and the user has no idea it changed cause the second slide top picture is the same as the background picture of the first slide. This allows the user to swipe and go instantly through the slides without having to see transitions which are still nice to see if they do nothing.

Bootstrap 5 CSS Grid.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.