Here I would like to share you a simple parallax content slider based on our dnn ultra media/gallery module #GalleryPlus. Using CSS animations, we’ll control the animation of each single element in the slider and create a parallax effect by animating the background of the slider itself.

The idea and implementation for this comes from this original post [Parallax Content Slider with CSS3 and jQuery] and we converted it as one optional template of #GalleryPlus so that you can make it work quickly with highly configurable options.

Options/Settings for customization

The following options are available when building this template:

• Color scheme: it provides one handy and built-in way for style customization and you can specify which color scheme to be applied in slider style, such as "Orange" and "Red" option.
• Background increment: it means increment the background position (parallax effect) when sliding and you can control the amount of pixels it will be moved.
• Background source: you can specify the background image for the slider and it required absolute url. If let it empty, it will apply the default yellow one.
• Auto play: it decides to whether to auto play slideshow in the beginning.
• Show paging navigation: whether to activate the paging navigation in the bottom of this slider.
• Height: it specifies the height of this slider container and recommend the height of background image. It required px as unit, such as 340px in default.

Notice that we are using a simple fallback for browsers that don’t support CSS animations and transitions.

Live Preview »  Order Now »