Hero slider – travel company

  • Visit norway today

    Go and explore all the beauty of Norway.
    Read More
  • Hawaii paradise

    Discover all the goods of Hawaii and the islands nearby.
    Read More
  • Discover big apple

    New York City - the city that never sleeps
    Read More
This is premium block. You need to have an active subscription to be able to copy this block. Check our plans here.


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.

How to use it?

1. Copy the block

By clicking you will copy the code generated by Hydrogen plugin

2. Paste the code

For that you will need a Hydrogen plugin or its free version Hydrogen Paste.

3. Edit content

Adjust content and styling to your needs. All elements are using unique classes so they won´t colide with each other.