Hero slider – travel company

05 July 2022
Tony Nguyen
Preview demo:
This is premium element. You need to have active membership to access it.
Make sure to read this

Instructions / notes

The indicator is pure css animation. To match it with slider duration you need to enter same duration for the animation as well. We used little bit of code to help us reset the animation whenever user clicks on nav arrows. Also the nav arrows are custom made and require little code to connect them with slider.

You may notice some delay between slider and indicator after certain amount of time. It is happening because slider uses javascript animations and indicator css animations. Most likely the browsers are processing them with few miliseconds difference. They are not deeply synchronized because we wanted to use as minimum code as possible to keep it light.