How to create a custom carousel for Visual Composer content elements step by step

Рубрики WPBakery Page Builder (formerly Visual Composer)

Visual Composer is the most popular WordPress Page builder plugin developed by WP Bakery. It is an easy to use and extendable drag and drop page builder with two types of editors, Backend Editor and Frontend Editor.

Visual composer is powering more than 1,000,000+ Websites. It has 40+ predefined content elements and 60+ predefined layout templates. You can also extend Visual Composer with its fantastic 200+ addons.

As a web developer you can add 3rd party shortcodes to Visual Composer content elements using Shortcode Mapper. This post covers how to create a custom carousel with dynamic options and add it in content element list.

Before staring, it is assumed that

  • Visual Composer is installed and activated
  • Carousel Plugin files (js/css) are enqueued (This post uses Owl Carousel for example)

Step.1 Create Nested Shortcode to add carousel child element

To create nested shortcode, add this code in functions.php.

Now add this shortcode to Visual Composer content elements list using vc_map() function.

Do not forget to extend WPBakeryShortCodesContainer class. Your “container” content element should extend this to inherit all required functionality.

Now we can see the shortcode for parent element is added in contents list.

When we add My Carousel element, it has ability to add its child elements.

Step.2 Create carousel child element 

Parent element is ready to wrap its child element. Now we will create carousel child elements.

Now add this child shortcode to Visual Composer content elements list using vc_map() function.

Again do not forget to extend WPBakeryShortCode class.

After Adding child element you can see the settings for individual item.

 

Step.3 Get carousel options dynamically through params

We have created a simple carousel so far. where carousel options are set in theme’s custom.js file. Now we will create a dynamic carousel where we get carousel options through params.

First of all lets replace the Nested Shortcode for parent container in Step 1 with the following code.

Now add more params in Step 1 mapper function .
lastly we will add some code in theme’s custom.js file.

We have options appeared in My Carousel Settings.

 

This is not all done. We can do a lot more things to extend the visual composer using Developer API.