Knowledge Base

Browse through our expansive online help documentation.

Managing Slider Animation in Hydro

Hydro uses FlexSlider plugin to transition the background images in the slider version of the template.

Adjusting the Slider Animation Speed

You can adjust the speed of the slider as it scrolls in the .hero section of the index-slider.html file. Speed is measured in seconds and can be modified by following these instructions:

  1. Open the index-slider.html file in your code editor.
  2. Search for the following: FlexSlider
  3. Change the seconds in slideshowSpeed:6000. For example, if you want the slider animation to change every seven seconds, change slideshowSpeed:6000 to slideshowSpeed:7000.
  4. Save the index-slider.html file and view the changes in your web browser.

There are many other options you can customize in FlexSlider. To learn more, please refer to FlexSlider’s repository.