• Impact Slide Controls

Awesome Controls


Impact uses Font Awesome to bring you crisp and flexible navigation controls for your slideshows. You have full control over the style and position of the controls. There are 10 arrow styles to choose from. In the example above, the bullets can were configured to contain slide numbers as well.

Controls on Hover

In the slideshow in this example, the Impact controls will be displayed when that slideshow is hovered over. Also take note that this example uses Impact's slide animation. Isn't the woman in this slideshow gorgeous? I am a lucky man...

External Controls


You also have full control over the Impact slideshows with external controls. The below buttons will control the slideshow in the previous example. This is very easy to setup. Simply add the following classes to a button or link in order to create the controls. The impact ID mentioned is configured inside the Impact stack.

  • impactid-prev
  • impactid-next
  • impactid-stop
  • impactid-start
  • impactid-scroll
  • impacted-mute
  • impacted-unmute
  • impacted-toggle-mute

Auto Hide Full Screen Header


Now that you have scrolled this far down the page, you should notice that you can not longer scroll back up to the top and see the initial full page slideshow. Impact has the ability to completely remove full screen banners once they move out of the browser's viewport. Refresh the page and have another look.

Have a look at the demo below. Impact is fading between very similar images where only the shades of green are different. This is great for more subtle effects.