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:
- Open the main.js file in your code editor.
- Search for the following function: $(‘#slides’).superslides
- Comment out (do not delete) play:’5000′ to disable the animation. If you want to re-enable the animation, simply uncomment the code.
- 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:
- Open the main.js file in your code editor.
- Search for the following function: $(‘#slides’).superslides
- 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′.
- 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:
- Open the main.js file in your code editor.
- Search for the following function: $(‘#slides’).superslides
- Change animation:’fade’ to animation:’slide’. To change from slide mode, change animation:’slide’to animation:’fade’.
- Save the main.js file.