Looking for mind-blowing effects? 🤯 Explore Slider Revolution's advanced WebGL animations

QUICK TIP:

Review the Basic Template Setup for information about how to setup a custom production environment.

To get started with the Panorama Add-On, first add the "revolutions-addons" folder into your production site:

back to top

Next, add the Panorama stylesheet and script. The script should placed below all other scripts on the page.

back to top


<!-- PANORAMA STYLESHEET -->
<link type="text/css" href="revolution-addons/panorama/css/revolution.addon.panorama.css" />


<!-- PANORAMA SCRIPTS -->
<script type="text/javascript" src="revolution-addons/panorama/js/three.min.js"></script>
<script type="text/javascript" src="revolution-addons/panorama/js/revolution.addon.panorama.min.js"></script>

Next, assign a variable to your slider's main settings script as shown in the following example.

back to top


var slider = jQuery('#rev_slider_1').show().revolution({

/* ******************** */
/* SLIDER SETTINGS HERE */
/* ******************** */

});

Then initialize the Panorama Addon directly after the slider settings (shown above)

back to top


RsAddonPanorama(jQuery, slider);

Next, setup your Slides with your Panorama settings and images:

back to top
image
    The url to use for the panorama image. Images should be sized to thepower of 2
    autoplay
    • "true"
    • "false"
    If the panorama should move without user-interaction
    autoplayDirection
    • "forward"
    • "backward"
    The horizontal movement for autoplay
    autoplaySpeed
      Movement speed for the autoplay option (30-250 recommended)
      controls
      • "throw"
      • "drag"
      • "mouse"
      • "click"
      • "none"
      Add mouse-interaction to control the panorama
      throwSpeed
        Movement speed for the "throw" control option (500-900 recommended)
        mousewheelZoom
        • "true"
        • "false"
        Zoom the panorama in and out with the mousewheel
        smoothZoom
        • "true"
        • "false"
        Add easing to the mousewheel zooming
        zoomMin
          The minimum zoom percentage(25-100)
          zoomMax
            The maximum zoom percentage(100-175)


            <!-- BEGIN PANORAMA SLIDE -->
            <li data-transition="fade"

            <!-- panorama settings and image urls -->
            data-panorama='{

            "image":"images/panorama.jpg",
            "autoplay":"true",
            "autoplayDirection":"forward",
            "autoplaySpeed":"20",
            "controls":"throw",
            "throwSpeed":"750",
            "mousewheelZoom":"false",
            "smoothZoom":"true",
            "zoomMin":"75",
            "zoomMax":"150"

            }'>

            <!-- Load the transparent .png file for PANORAMA Slides -->
            <img src="assets/images/transparent.png" class="rev-slidebg">

            <!-- ***************** -->
            <!-- SLIDE LAYERS HERE -->
            <!-- ***************** -->

            </li><!-- END PANORAMA SLIDE -->

            Popular Solutions

            [ess_grid alias="wp-popular-solutions"]
            Impressum | Datenschutz