Sridhar Katakam

Genesis and WordPress Tutorials

Multiple Rotating Background images with Ken Burns Effect in Altitude Pro

by 9 Comments

Updated on April 19, 2018

This tutorial provides the steps to replace the single static background image for Front Page 1 section of Altitude Pro with multiple rotating background images.

The images will be set to animate using the Ken Burns effect using Rolo slider plugin.

Live Demo

Note: Front Page 1 widget area is not going to be as tall as the viewport anymore.

Step 1

Install and activate Rolo slider.

Add a new slider that uses Default layout.

(click to view larger version)

Step 2

Let's remove .front-page-1's background image and from appearing in the "Front Page Background Images" section inside the Customizer using the altitude_images filter.

Add the following in Altitude Pro's functions.php:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Great job on the optional slider feature! Thanks!

    Is there a way to make the slider fit full screen (CSS “background-size: cover;” setting perhaps?) like with the default static image so at any screen size the slider is always full screen?

    Reply

  • Darn. My HTML widget that overlays the slider is fading in and out with the image fade effect. I’ll try to troubleshoot.

    Reply

      • I’m sorry, Sridhar, for the late reply. I think the breakdown was something I did, because it worked perfectly, just like your demo, and then I encountered my issue (so I think your code is ok).

        What I ended up doing today is remove the custom HTML widget that contained the text and button content, and adding text and buttons via Rolo Slider – this worked great because it allows the client to change the text (and buttons) on a slide by slide basis.

        So I think all is “resolved” 🙂

        Cannot thank you enough!!

        Reply
    • >