Updated 1st April 2018

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.

How I Built The Client Logo Carousel in Divi

Step 1
First, you will need to download Owl Carousel. Once you have downloaded your files you can enter the functions below directly to your Divi child theme functions or use the Code Snippet Plugin to add this function to 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', 'wp-content/assets/css/owl.carousel.css' );
    wp_enqueue_script('owl_carousel_js', 'wp-content/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('/<br style=(.*)>/mi','',$output);
}

 

Step 3
Add the images you want to use a WordPress Gallery. It doesn’t matter how many columns you choose as our function above removes the tags 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 the 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 your own but with any luck, you should have a functioning Owl Carousel.