This guide is considered to be of intermediate difficulty.

In this short guide, I will explain how you can make an image carousel within the Divi theme. This is something that has been missing IMO but also something that is very simple to add using the default WordPress image Gallery and the popular Owl Carousel 2.

Very little to no custom CSS is needed and we can even add our carousel without making a child theme with the help of a few additional plugins.

Yes, there are many carousel plugins available for WordPress but I like to add only what I need to my sites to reduce bloat and keep a reasonable page load time. So rather than installing a plugin we can add a few lines of functions and achieve the same results.

 

Step 1 First, you will need to download Owl Carousel or alternatively you can serve your files from the CloudCanvas CDN. Once you have downloaded your files or if you are going to use the CloudCanvas hosted files you can enter the functions below directly to your Divi child theme functions or use the My Custom Functions plugin to add this function within your admin.

We have also used a Google hosted jQuery rather than our local version, this is optional.

function cc_owlc_assets() {
    // Load Google jQuery
    wp_deregister_script('jquery');
    wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js', false, '1.12.4');
    wp_enqueue_script('jquery');

    // Owl Carousel 2
    wp_enqueue_style( 'owlcarousel_css', '//cdn.cloudcanvas.website/wp-content/cc-assets/css/owl.carousel.css' );
    wp_enqueue_script('owl_carousel_js', '//cdn.cloudcanvas.website/wp-content/cc-assets/js/owl.carousel.min.js', true, '2.0');
}
add_action( 'wp_enqueue_scripts', 'cc_owlc_assets', 15);

 

Step 2 Next we will use a short function to remove any tags from the WordPress gallery output as these can cause problems with our carousel.

add_filter( 'the_content', 'remove_br_gallery', 11, 2);
function remove_br_gallery($output) {
    return preg_replace('//cdn.cloudcanvas.website/<br style=(.*)>/mi','',$output);
}

 

Step 3 Add the images you want to use into a WordPress Gallery, it doesn’t matter how many columns you choose as our function above removes the placed at the end of each row meaning any number of columns will work with the carousel.

If you want your images to link to pages or other sites you can use a plugin such as WP Custom Gallery Links. This is useful if you want to make a logo carousel of clients.  

Step 4 In this step we will configure the slider settings, you will need to change the ‘#gallery-2 id to the id of your gallery. You can get this by inspecting your gallery using a browser web inspector see screenshot below to see:

WordPress Gallery ID

We have used basic setting for Owl Carousel here, please see the documentation for more details of what you can do.

function carousel_script() {
?> 
<?php ?>
    <script type="text/javascript">
        $(window).load(function(){
          $("#gallery-2").owlCarousel({
          	items: 4,
            margin: 20,
            smartSpeed: 450,
            autoplay: true,
            loop: true,
            nav: false,
            dots: false
          });
        })
    </script>
<?php ?>
	<?php
}
add_action('wp_footer', 'carousel_script', 99);

 

Conclusion You will need to make some CSS adjustments of you own but with any luck you should have a functioning Owl Carousel.  

Pin It on Pinterest