Divi is a popular WordPress theme and page builder that lets you create beautiful and responsive websites with ease. Divi has many modules and features that you can use to create different types of content, such as images, text, buttons, and more. However, Divi doesn’t have a built-in module for creating a testimonial carousel. If you want to create a testimonial carousel in Divi, you will need to use some custom code or a third-party Divi plugin.
However, using a plugin can sometimes cause compatibility issues, performance problems, or security risks. If you want to create a testimonial carousel in Divi without using a plugin, you will need to use combination code (HTML, CSS, and jQuery) as well as the Divi Builder.
In this article, we will show you how to create a testimonial carousel in Divi without relying on any plugins.

Steps to Create Testimonial Carousel in Divi
Step 1: Create the Testimonial Content
- Add a single-column row
First, we start with creating the testimonial content by starting from scratch.
Go to the Divi Builder editor, then add a one-column row with a Blurb module. Basically, you can use other modules to create testimonial content, but for this example, we will use a Blurb module.

- Tweak and style up the module
Next, tweak and style your module as you prefer, such as adding an image, replacing the text, adding the star rating, etc.
In this example, we will create testimonial content with five carousel items. So, once you’ve tweaked and styled up the module, please duplicate it four times. Afterward, update the modules accordingly.
Note: Please ensure that your modules are inside one row and one column.

Step 2: Add the CSS Class
Next, we’re going to add the CSS class to the column and each module (carousel items).
- Column
Please add the CSS class wpp-3-col-feature-blurb-slider
to the column (Column Settings > Advanced tab > CSS ID & Classes > CSS Class)

- Modules
Add the CSS class wpp-3-col-feature-blurb
to each module (Blurb Settings > Advanced tab > CSS ID & Classes > CSS Class).

Step 3: Add the Custom Code
Now, it’s time to add the custom code to your testimonial carousel page.
Add a new section, then insert the Code Module inside the row. Afterward, please copy the combination code snippet (HTML, CSS, and JavaScript) below and paste it into the available field.
<style> .slick-slider { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow-x: hidden; margin: 0; padding: 0 0 0px; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-slide { position: relative; float: left; height: 100%; min-height: 1px; } .wpp-3-col-feature-blurb-slider .slick-arrow, .wpp-3-col-feature-blurb-slider .slick-arrow:hover, .wpp-3-col-feature-blurb-slider .slick-arrow:focus { position: absolute; font-size: 0; line-height: 0; padding: 0; color: transparent; outline: none; background: rgba(122,105,230,0.3); border: none; cursor: pointer; top: 50%; transform: translateY(-50%); z-index: 100; height: 50px; vertical-align: middle; border-radius: 50%; width: 50px; } .wpp-3-col-feature-blurb-slider .slick-prev { left: -50px; } .wpp-3-col-feature-blurb-slider .slick-next { right: -50px; } .wpp-3-col-feature-blurb-slider .slick-arrow:before { font-family: ETmodules; color: #000; background: transparent; opacity: 1; font-size: 46px; vertical-align: middle; color: #7a69e6; text-align: center; } .wpp-3-col-feature-blurb-slider .slick-arrow:hover:before { opacity: 0.8; } .wpp-3-col-feature-blurb-slider .slick-prev:before { content: '\34'; } .wpp-3-col-feature-blurb-slider .slick-next:before { content: '\35'; } ul.slick-dots { text-align: center; } .entry-content ul.slick-dots { position: absolute; bottom: 0; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; } .slick-dots li { position: relative; display: inline-block; margin: 0 5px; padding: 0; cursor: pointer; } .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 10px; height: 10px; padding: 0; cursor: pointer; color: transparent; border: 0; outline: none; background-color: #B7B7B7; border-radius: 10px; } .slick-dots li.slick-active button { background-color: #000000; } @media(max-width: 980px) { .wpp-3-col-feature-blurb-slider .slick-prev { left: -32px; } .wpp-3-col-feature-blurb-slider .slick-next { right: -30px; } } @media(max-width: 499px) { .wpp-3-col-feature-blurb-slider .slick-prev { left: -26px; } .wpp-3-col-feature-blurb-slider .slick-next { right: -24px; } } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script> <script> jQuery(document).ready(function() { jQuery('.wpp-3-col-feature-blurb-slider').slick({ dots: true, slidesToShow: 3, slidesToScroll: 1, responsive: [ { breakpoint: 980, settings: { slidesToShow: 2 } }, { breakpoint: 767, settings: { slidesToShow: 1 } } ] }); }); </script>

That’s it. To see the result, you can preview the page by clicking the Exit Visual Builder link, and don’t forget to save or publish your project if you want to.

The Bottom Line
Now, you have successfully created a testimonial carousel in Divi without using a plugin. You can use this technique to create as many testimonial carousels as you want on your website.
You have also learned some basic concepts of HTML, CSS, and jQuery that can help you create other types of carousels or effects in Divi.