Managing Slider Animation in Sub-Zero

We have pre-configured Sub-Zero to have certain animation properties for the slides in the #home section of the HTML files. However, you can change these settings by adjusting them in the main.js file.

Enabling/Disabling the Slider Animation

The main.js file is pre-configured with the slide animation in play mode, which automatically transitions each slide after a few seconds. To disable the animation and allow the user to click the navigation (at the bottom of the #homesection) to change the slides manually, follow these instructions:

  1. Open the main.js file in your code editor.
  2. Search for the following function: $(‘#slides’).superslides
  3. Comment out (do not delete) play:’5000′ to disable the animation. If you want to re-enable the animation, simply uncomment the code.
  4. Save the main.js file.

Adjusting the Slider Animation Speed

You can adjust the speed of the slider as it scrolls in the #home section of the HTML files. Speed is measured in seconds and can be modified by following these instructions:

  1. Open the main.js file in your code editor.
  2. Search for the following function: $(‘#slides’).superslides
  3. Change the seconds in play:’5000′. For example, if you want the slider animation to change every seven seconds, change play:’5000′ to play:’7000′.
  4. Save the main.js file.

Changing the Animation Type

There are two options for animations in the #home section of the HTML files – fade and slide. To switch between fade or slide, follow these instructions:

  1. Open the main.js file in your code editor.
  2. Search for the following function: $(‘#slides’).superslides
  3. Change animation:’fade’ to animation:’slide’. To change from slide mode, change animation:’slide’to animation:’fade’.
  4. Save the main.js file.