Have you ever thought about making a carousel for your website without using a plugin? 

Well, it’s not only possible but also can make your site faster and save you money from buying a plugin. 

In this guide, we’ll walk you through how to create Divi carousel without plugin. 

Let’s begin!

Step 1: Add Custom Code in Divi

The first step continues with the code insertion in Divi. 

This is because Divi carousel without plugin needs a third-party resource code to create. 

This code controls things like how many columns are shown in our carousel, the looping behavior, arrow buttons, screen size adjustments, and other features. 

In this case, we will use the slick.js library to accomplish this.

Now to add CSS code in Divi, head over to your WordPress Dashboard and follow these simple steps:

• Divi > Theme Options
• Scroll down to the bottom and find Custom CSS 
• Write the code or Paste it here
• Now to slightly change the carousel content, go to Divi > Theme Options > Integration
• Then write or Paste your dedicated code on the Add code to the < head > of your blog section

Finally, click Save Changes to save them and go to the next step.

Download the code from here.

Note: You can find many carousel CSS source codes on Google. Pick any one of them or customize them according to yours

Step 2: Add Section, Row & Module

Now we have to start with a new page or existing page. Go over the page and enable the visual builder to continue.

Here we sequentially follow these steps to add section, row, and module.

• First to add a section, simply click the blue (+) icon and pick the regular section
• Then click the green (+) button and select a single row
• Finally, add a module by clicking the grey (+) icon

Here we are going to use the Blurb module. You can choose any module in Divi. Just make sure it can sync with the carousel. 

Step 3: Configure Row & Module

In this step, we will configure the row and module cause to fulfill the goal of adding custom CSS code. 

Go to the Row settings > Column settings > Advanced > CSS ID & Classes > CSS Class > Paste the class

Next, change the same Class settings for the module. 

Step 4: Design the Blurb Module

Till step 3, we have structured a skeleton of a carousel without plugin. Now is the time to place the content for design in the module.

So, go back to the module, open the blurb settings, and start placing the content.

Add Image & Content

Now to design a simple carousel, we will input only an image and title content. 

For this, simply go to Blurb settings > Content and do these steps –

• For adding an image – Image & Icon > Image > Choose/ upload an image
• For adding Title – Text > Title > Give here your title

Fine-tune the Content

Though Divi offers a vast of design settings, try them out to make your creation look unique.

After applying some simple tweaks, you can see how it looks now –

Step 5: Multiple the Module 

Now just click over the Duplicate Module button in the module settings and multiply it by the number of carousel content you want to show.

Add Content to the Duplicates

This adding content step is the same as Step 4: Design the Blurb Module > Add Image & Content section

All you need to do is change the image and title, and the rest will remain the same. It is possible to customize the rest, but it won’t look too great.

Preview

Finally, we have done our carousel without plugin.

Let’s have a look at what we made!

Closing Thoughts

It’s all done! 

We hope you find this tutorial helpful. We’ve covered everything from adding code to creating a complete carousel with a basic design.

Although we’ve compiled this guide with slick.js, but there are various other carousel libraries available online. These include swiper.js, impress.js, PhotoSwipe.js, and more. 

However, before you use any of them, make sure you understand how to use the specific library.

If you have any further questions regarding how to create Divi carousel without plugin, please let us know in the comments below. Your queries are always appreciated.