Slider Revolution 6.3 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