Owl Carousel WPBakery Setup

December 15, 2024 · AI Conversations

User

Create owl casual wp bakery element for 3 items once in desktop and 1 item in mobile also so dots in mobile and arrow in desktop

Assistant

Creating an "Owl Carousel" element for WPBakery with your requirements (3 items on desktop, 1 item on mobile, dots on mobile, and arrows on desktop) involves integrating the Owl Carousel library and adding custom JavaScript and CSS. Here's a step-by-step guide:

—

### Step 1: Enqueue Owl Carousel
Ensure Owl Carousel is included in your WordPress theme or plugin. Add the following to your theme's `functions.php`:

function enqueue_owl_carousel() {
    wp_enqueue_style('owl-carousel-css', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css', [], null);
    wp_enqueue_style('owl-carousel-theme', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css', [], null);
    wp_enqueue_script('owl-carousel-js', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js', ['jquery'], null, true);
    wp_enqueue_script('custom-owl-js', get_template_directory_uri() . '/js/custom-owl.js', ['owl-carousel-js'], null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_owl_carousel');

—

### Step 2: Create a Custom WPBakery Element
Register a custom element for WPBakery in your theme's `functions.php`:

“`

User

Wp bakery already has owl library so just use that in our element

Assistant

If WPBakery already includes the Owl Carousel library, you can directly utilize it and create a custom shortcode to meet your requirements. Here's how you can do it:

—

### Step 1: Register a Custom WPBakery Element
Add the following code to your theme's `functions.php` to define a custom element for the Owl Carousel:

function custom_wp_bakery_owl_element() {
    vc_map([
        'name' => __('Custom Owl Carousel', 'text-domain'),
        'base' => 'custom_owl_carousel',
        'category' => __('Content', 'text-domain'),
        'params' => [
            [
                'type' => 'param_group',
                'heading' => __('Carousel Items', 'text-domain'),
                'param_name' => 'items',
                'params' => [
                    [
                        'type' => 'textarea_html',
                        'heading' => __('Item Content', 'text-domain'),
                        'param_name' => 'content',
                        'description' => __('Content for this item', 'text-domain'),
                    ],
                ],
            ],
        ],
    ]);
}
add_action('vc_before_init', 'custom_wp_bakery_owl_element');

—

### Step 2: Define the Shortcode
Add the shortcode logic to handle the carousel rendering:

function render_custom_owl_carousel($atts, $content = null) {
    $atts = vc_map_get_attributes('custom_owl_carousel', $atts);
    $items = vc_param_group_parse_atts($atts['items']);

    if (empty($items)) {
        return '<p>' . __('No carousel items found.', 'text-domain') . '</p>';
    }

    ob_start(); ?>
    <div class="custom-owl-carousel owl-carousel">
        <?php foreach ($items as $item) : ?>
            <div class="carousel-item">
                <?php echo wpb_js_remove_wpautop($item['content'], true); ?>
            </div>
        <?php endforeach; ?>
    </div>
    <script>
        jQuery(document).ready(function ($) {
            $('.custom-owl-carousel').owlCarousel({
                loop: true,
                margin: 10,
                responsiveClass: true,
                responsive: {
                    0: {
                        items: 1,
                        dots: true,
                        nav: false
                    },
                    768: {
                        items: 3,
                        dots: false,
                        nav: true
                    }
                },
                navText: ['<span class="owl-prev-arrow">‹</span>', '<span class="owl-next-arrow">›</span>']
            });
        });
    </script>
    <style>
        .owl-prev-arrow, .owl-next-arrow {
            font-size: 18px;
            color: #000;
            cursor: pointer;
        }
    </style>
    <?php
    return ob_get_clean();
}
add_shortcode('custom_owl_carousel', 'render_custom_owl_carousel');

—

### Step 3: Add the Element in WPBakery
Now, in WPBakery, you will see a new "Custom Owl Carousel" element. Add this element and define the items with the content you want to display.

—

### Step 4: Style the Carousel (Optional)
Customize the appearance with additional CSS in your theme’s stylesheet:

.custom-owl-carousel .carousel-item {
    text-align: center;
    padding: 20px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 5px;
}

This setup uses WPBakery's built-in Owl Carousel library, ensuring compatibility and minimizing unnecessary enqueues.

Owl Carousel WPBakery Setup

Leave a Comment Cancel