The Worlds Most Powerful
WordPress Builder

If you Purchased & Registered a Slider Revolution License you can comfortably upgrade version 5.x to 6.0 from your WordPress Dashboard.

Why Activate Slider Revolution?

Activating Slider Revolution with your Personal Purchase Code will unlock all available Features.

Easy Live Updates
Personal License Key
200+ Template Library
1000+ Object Library
25+ Amazing Add-Ons
1on1 Ticket Support

*Regular License from $29. One License Key required per Domain.

Slider Revolution 6.0 NOW available!

VM184:26

QUICK TIP:

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

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

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


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


<!-- BUBBLEMORPH SCRIPT -->
<script type="text/javascript" src="revolution-addons/bubblemorph/js/revolution.addon.bubblemorph.min.js"></script>

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


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

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

});

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


/*
ARGS:
- jQuery
- slider API variable
- if the slider is a carousel (true/false)
*/
BubbleMorphAddOn(jQuery, slider, false);

Next, add a BubbleMorph Layer

BubbleMorph Layers extend the default Shape Layer, and all BubbleMorph options are written in responsive format.

data-bubblesbg
    The background color for the bubbles
    data-numbubbles
      The max number of morph bends
      data-bubblesbufferx
        Adds a horizontal buffer to help prevent bleeding outside the slider
        data-bubblesbuffery
          Adds a vertical buffer to help prevent bleeding outside the slider
          data-bubblesspeedx
            The shape movement's horizontal speed
            data-bubblesspeedy
              The shape movement's vertical speed
              data-bubblesbordercolor
                Border color if used
                data-bubblesbordersize
                  Optional border to apply to the shape


                  <!-- BEGIN BUBBLEMORPH LAYER -->
                  <div class="tp-caption tp-shape tp-shapewrapper tp-bubblemorph"

                  data-frames='[{"delay": 0, "speed": 300, "from": "opacity: 0", "to": "opacity: 1"}, {"delay": "wait", "speed": 300, "to": "opacity: 0"}
                  data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
                  data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']"
                  data-width="100%"
                  data-height="100%"
                  data-type="shape"
                  data-basealign="slide"
                  data-responsive_offset="on"

                  data-bubblesbg="#000000|#000000|#000000|#000000"
                  data-numbubbles="6|6|6|6"
                  data-bubblesbufferx="100|100|100|100"
                  data-bubblesbuffery="100|100|100|100"
                  data-bubblesspeedx="0.25|0.25|0.25|0.25"
                  data-bubblesspeedy="0.25|0.25|0.25|0.25"
                  data-bubblesbordercolor="#FFFFFF|#FFFFFF|#FFFFFF|#FFFFFF"
                  data-bubblesbordersize="1|1|1|1"

                  ]'></div><!-- END BUBBLEMORPH LAYER -->

                  Popular Solutions