Knowledge Base

Browse through our expansive online help documentation.

View Categories

Managing Slider Animation in Phantom

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:

  1. Open the hero-slider.js file in your code editor.
  2. Search for the following function: $(“#slides”).superslides
  3. Comment out (do not delete) play:’6000′ to disable the animation. If you want to re-enable the animation, simply uncomment the code.
  4. 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:

  1. Open the hero-slider.js file in your code editor.
  2. Search for the following function: $(“#slides”).superslides
  3. 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′.
  4. 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:

  1. Open the hero-slider.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 hero-slider.js file.