Today we are going to see how can we make carousel in Divi which I think is an important and missing module in Divi but it’s competitors like Elementor and Beaver Builder have. So why we left behind. Let’s do this and convert any number of modules into series of the carousel.

Step 1: 

As always step 1 is making environment. I always assume starting point as Divi default settings. Navigate to Divi > Theme Options > Integration > Head Section and paste following code. Please remember, if code will not work after pasting then remove and retype commas and arrows as sometime while copy pasting code commas and arrows are change.

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

jQuery(document).ready(function($) {
$('.single-item').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
  responsive: [
    {
      breakpoint: 968,
      settings: { slidesToShow: 2 }
    },
    {
      breakpoint: 680,
      settings: { slidesToShow: 1 }
    }
  ]
});
});

Figure 1.2

After copying jQuery library and script now it’s time to copy CSS to give some default styling to our carousel. For CSS please copy following code and paste it in Divi > Theme Options > Custom CSS like we show in figure 1.3

.single-item .et_pb_module {
    padding:20px !important;
    margin:0px 10px !important;
    border: 1px solid #eee;
}
.slick-prev,
.slick-next {
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size: 0;
    font-weight: 400;
    font-style: normal;
    font-family: dashicons;
    line-height: 1;
    text-align: center;
    text-decoration: inherit;
    position: absolute;
    top:46%;
    cursor: pointer;
    border: none;
    outline: none;
    padding: 0;
    vertical-align: top;
    z-index: 9;
    color: transparent;
    background: transparent;
    -webkit-transition: color .1s ease-in 0;
    transition: color .1s ease-in 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-prev {
    left: -40px;
}
.slick-next {
    right: -20px;
}
.slick-prev:before {
    color: #000;
    font-size: 35px;
    content: "\\f341";
}
.slick-next:before {
    color: #000;
    font-size: 35px;
    content: "\\f345";
}

Figure 1.3

Step 2: 

Now since we have the environment ready so we can jump on actual work that we need to do. Okay now go to post or page where you want the carousel to be created and give a row column a class name “single-item” (obviously without inverted commas) like we mentioned in figure 1.4 and 1.5

Figure 1.5

After inserting class in a row now you are ready to insert as many modules as you want they will appear as a carousel on the front end. I have shown in figure 1.6 that I have inserted in a demo version.

Figure 1.6

That’s it! You have created a carousel of any module. I know what you guys are thinking now 😉 that where is blog module!! Right? Yes, blog module will not work in this way since it has some different hierarchy so I will make a different tutorial for that. Till then have a good day and thanks for read my tutorials. Do comment and share url in a comment below if you use this method in your project.