We have pre-configured Phantom to have certain animation properties for the slides in the #home, #work, and .project-details-page-slider sections of the HTML files. However, you can change these settings by adjusting them in the main.js and hero-slider.js files.
Enabling/Disabling the Slider Animation
The main.js and hero-slider.js files are 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 #home section) to change the slides manually, follow these instructions:
- Open the hero-slider.js file in your code editor.
- Search for the following function: $(“#slides”).superslides
- Comment out (do not delete) play:’6000′ to disable the animation. If you want to re-enable the animation, simply uncomment the code.
- Save the hero-slider.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 hero-slider.js file in your code editor.
- Search for the following function: $(“#slides”).superslides
- Change the seconds in play:’6000′. For example, if you want the slider animation to change every seven seconds, change play:’6000′ to play:’7000′.
- Save the hero-slider.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 hero-slider.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 hero-slider.js file.