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!

This article will show you how to setup the PaintBrush Addon for jQuery Slider Revolution

Important Note:

You can get the PaintBrush Add-On pack directly from our support center or by email at help at themepunch dot support

1. To get started with the Particles Add-On, unzip and upload the "paintbrush-addon" folder into your production site.

Note:

The PaintBrush Add-On zip package includes the full demo template markup and the required images.

2. Next, the PaintBrush stylesheet and script should be placed below all other scripts on the page.


<!-- PAINTBRUSH STYLESHEET -->
<link rel="stylesheet" type="text/css" href="css/revolution.addon.paintbrush.css" />


<!-- PAINTBRUSH SCRIPT -->
<script type="text/javascript" src="js/revolution.addon.paintbrush.min.js"></script>

3. Next, in your slider's main settings script, you'll need to call the PaintBrush Add-On as shown in the following example.


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

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

});

/*
Instantiate the PaintBrush AddOn
Args: slider reference (assigned above)
*/
RevSliderPaintBrush(slider);

4. Next, setup your Slides with your PaintBrush settings and images:

size
    The HTML5 Canvas lineWidth(in pixels)
    blurAmount
      The CSS3 Blur filter amount in pixels
      fadetime
        The amount of time before the paint disappears (in milliseconds)
        image
          Paint the slide's main background image
          edgefix
            Stretch the image (percentage) to help fix blur effect soft edges
            fixedges
            • true
            • false
            Stretch the image to help remove blur soft edges (Slide transition will be set to "Fade")
            style
            • "round"
            • "square"
            • "butt"
            The HTML5 Canvas lineCap style
            blur
            • true
            • false
            Auto-Blur the slide's main bg image
            scaleblur
            • false
            • true
            Blur value will be adjusted as the slider resizes
            responsive
            • false
            • true
            Scale the brush size as the slider resizes
            disappear
            • true
            • false
            Choose if the paint should fade away after drawing
            carousel
            • false
            • true
            Choose if using "Carousel" Slider Type


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

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

            "size":200,
            "origsize":200,
            "blurAmount":10,
            "fadetime":600,
            "image":"assets/images.jpg",
            "edgefix":10,
            "fixedges":true,
            "style":"round",
            "blur":true,
            "scaleblur":false,
            "responsive":false,
            "disappear":true,
            "carousel":false
            }'data-revaddonpaintbrushedges="1">

            <!-- Load the background image file for PaintBrush Slides -->
            <img src="assets/paintbrush_bg2.jpg" class="rev-slidebg">

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

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

            Popular Solutions