Search

How to Create Testimonial Carousel in Divi (without Plugin)

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.

Adding the Blurb module to the Divi Builder editor.
  • 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.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to save yearly expense up to $219? why not?

Leave a Comment

Save your Divi assets to the cloud and access them from anywhere.