Source: https://divicake.com/blog/create-a-carousel-in-divi-without-a-plugin/

[Blog](https://divicake.com/blog/)/[Tips & Tricks](https://divicake.com/category/tips-tricks/)

# Create a Carousel in Divi Without a Plugin

By Divi Cake·29 October 2024·Updated 19 August 2026·8 min read

Create a Carousel in Divi Without a Plugin

We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/)

On this page

- [Step 1: Access the WordPress Dashboard to Create a Carousel](https://divicake.com#step-1-access-the-wordpress-dashboard-to-create-a-carousel)
- [Step 2: Create a New Page or Edit an Existing Page](https://divicake.com#step-2-create-a-new-page-or-edit-an-existing-page)
- [Step 3: Add a Code Module to Create a Carousel](https://divicake.com#step-3-add-a-code-module-to-create-a-carousel)
- [Step 4: Add HTML Structure to Create a Carousel](https://divicake.com#step-4-add-html-structure-to-create-a-carousel)
- [Step 5: Add Custom CSS Styles](https://divicake.com#step-5-add-custom-css-styles)

- [Step 6: Add JavaScript to Create a Carousel Functionality](https://divicake.com#step-6-add-javascript-to-create-a-carousel-functionality)
- [Step 7: How to Customize Carousel](https://divicake.com#step-7-how-to-customize-carousel)

- [Change Colors of Carousel](https://divicake.com#change-colors-of-carousel)
- [Change Carousel’s Title and Description Color](https://divicake.com#change-carousels-title-and-description-color)
- [Change Carousel’s Slide Background Color](https://divicake.com#change-carousels-slide-background-color)
- [Final Result of Creating a carousel](https://divicake.com#final-result-of-creating-a-carousel)
- [Conclusion](https://divicake.com#conclusion)

Create a carousel in [Divi](https://divicake.com/go/divi/) without using a plugin is quite manageable. In this comprehensive tutorial, we’ll guide you through building a carousel using HTML, [CSS](https://divicake.com/blog/how-to-add-custom-css-to-divi/), and JavaScript. Although Divi’s free version lacks an advanced customizable carousel module, we’ll be creating one from scratch. This tutorial will take you step by step through adding the necessary HTML, CSS, and JavaScript, while also showing you how to customize it by uploading your own content, adjusting background colors, and modifying the heading and text colors.

## Step 1: Access the WordPress Dashboard to Create a Carousel

Log in to your [WordPress](https://divicake.com/blog/wordpress-tutorial/) admin panel by navigating to yourdomain.com/wp-admin. Enter your username and password to access the WordPress dashboard.

Log into your WordPress admin panel by entering your credentials at yourdomain.com/wp-admin to access the dashboard and manage your site.

## Step 2: Create a New Page or Edit an Existing Page

For creating a carousel, we have two ways: first, you can create a new page where you want the carousel, and second, you can create the carousel on a premade page. This choice is yours; in this tutorial, we are going to create it on a blank new page.

- Navigate to the Pages section on the left sidebar.
- Click on Add New to create a new page, or choose an existing page by clicking All Pages and then select Edit with Divi to customize the page you want to edit.

Alt text: Start by creating a new page or editing an existing one for carousel setup. Use Divi for page editing to add your customized carousel.

## Step 3: Add a Code Module to Create a Carousel

Now that we are in the Divi Visual Builder, we need to use a Code Module. This is where we will add our code, which will convert into a beautiful 3D carousel module. Follow the steps below:

- In the Divi Builder, click on the + icon to add a new module.
- Search for the Code module and select it.
- This module allows you to add custom HTML, CSS, and JavaScript code directly.

In Divi Visual Builder, use the Code Module to input custom HTML, CSS, and JavaScript for building a 3D carousel.

Read More: [How to Set Up and Style Slider Module in Divi: A Step-by-Step Guide](https://divicake.com/blog/how-to-style-divi-sliders/)

## Step 4: Add HTML Structure to Create a Carousel

Once you click on the Code module, the module settings will open as shown in the screenshot. Your task is to copy the HTML code provided below and add it to the code module, which will create the basic structure of our carousel. Follow the steps:

- Click on the Content Tab, then click on Text.
- Copy the HTML code provided below.
- Paste the copied code into the Code box, as shown in the image.

Copy HTML Code from Here

<div class="carousel-container">  <div class="carousel">  <!-- Slide 1 -->  <div class="carousel-slide">  <img src="http://my-practice-web.local/wp-content/uploads/2024/09/fashion-20.jpg" class="carousel-image">  <h2 class="carousel-heading">Heading 1</h2>  <p class="carousel-text">This is the description text for the first slide.</p>  </div>   <!-- Slide 2 -->  <div class="carousel-slide">  <img src="http://my-practice-web.local/wp-content/uploads/2024/09/footer-background-01-1.jpg" alt="Slide 2 Image" class="carousel-image">  <h2 class="carousel-heading">Heading 2</h2>  <p class="carousel-text">This is the description text for the second slide.</p>  </div>   <!-- Slide 3 -->  <div class="carousel-slide">  <img src="http://my-practice-web.local/wp-content/uploads/2024/09/groom.jpg" alt="Slide 3 Image" class="carousel-image">  <h2 class="carousel-heading">Heading 3</h2>  <p class="carousel-text">This is the description text for the third slide.</p>  </div>    <!-- Slide 4 -->  <div class="carousel-slide">  <img src="http://my-practice-web.local/wp-content/uploads/2024/09/footer-background-01-1.jpg" alt="Slide 2 Image" class="carousel-image">  <h2 class="carousel-heading">Heading 4</h2>  <p class="carousel-text">This is the description text for the second slide.</p>  </div>      <!-- Slide 5 -->  <div class="carousel-slide">  <img src="http://my-practice-web.local/wp-content/uploads/2024/09/footer-background-01-1.jpg" alt="Slide 2 Image" class="carousel-image">  <h2 class="carousel-heading">Heading 5</h2>  <p class="carousel-text">This is the description text for the second slide.</p>  </div>    <!-- Slide 6 -->  <div class="carousel-slide">  <img src="http://my-practice-web.local/wp-content/uploads/2024/09/footer-background-01-1.jpg" alt="Slide 2 Image" class="carousel-image">  <h2 class="carousel-heading">Heading 6</h2>  <p class="carousel-text">This is the description text for the second slide.</p>  </div>        <!-- Slide 7 -->  <div class="carousel-slide">  <img src="http://my-practice-web.local/wp-content/uploads/2024/09/footer-background-01-1.jpg" alt="Slide 2 Image" class="carousel-image">  <h2 class="carousel-heading">Heading 7</h2>  <p class="carousel-text">This is the description text for the second slide.</p>  </div>  </div>   <!-- Navigation Buttons -->  <button class="carousel-btn prev">❮</button>  <button class="carousel-btn next">❯</button> </div>

In Divi’s Code Module, add the provided HTML code to set up the basic structure of the carousel. Follow the steps to insert the code correctly.

Read More: [Getting Started with Divi: Content Settings](https://divicake.com/blog/getting-started-with-divi-content-settings/)

## Step 5: Add Custom CSS Styles

In this step, we will further enhance the carousel module by adding [custom CSS](https://divicake.com/blog/how-to-add-custom-css-to-divi/) code to make it more attractive and visually appealing.

- In the Code Module settings, click on the Advanced Tab.
- Scroll down and click on Custom CSS.
- Copy the CSS code provided below and paste it into the Main Element section.
- Make sure not to include the starting and closing CSS tags (<style>, </style>) because Divi automatically provides them. Including these tags will cause errors, and the code won’t work properly.

Copy CSS code from here

.carousel-container {  position: relative;  max-width: 100%;  margin: auto;  overflow: hidden;  padding-left: 20px;  padding-right: 50px;  perspective: 1000px; /* 3D perspective */ }  .carousel {  display: flex;  transition: transform 0.5s ease-in-out;  transform-style: preserve-3d; /* Enable 3D transformations */ }  .carousel-slide {  min-width: 33.33%;  text-align: center;  display: flex;  flex-direction: column;  align-items: center;  justify-content: center;  background-color: #f0f0f0; /* Default background color */  padding: 20px;  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Shadow for 3D effect */  border-radius: 10px;  transform: rotateY(0deg); /* Initial 3D rotation */  transition: transform 0.5s ease-in-out; /* Smooth transition for the 3D effect */ }  /* 3D Effect: Rotate slides slightly to the sides */ .carousel-slide:nth-child(odd) {  transform: rotateY(5deg); /* Rotate odd slides */ }  .carousel-slide:nth-child(even) {  transform: rotateY(-5deg); /* Rotate even slides */ }  .carousel-image {  width: 150px;  height: 150px;  object-fit: cover;  border-radius: 10px;  margin-bottom: 20px;  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);/* Shadow for 3D depth */ }  .carousel-heading {  margin-top: 10px;  font-size: 24px;  font-weight: bold;  color: #333; }  .carousel-text {  margin-top: 10px;  font-size: 16px;  color: #555; }  .carousel-btn {  position: absolute;  top: 50%;  transform: translateY(-50%);  background-color: rgba(2,237,206,0.5);  color: rgb(226,14,14);  border: none;  padding: 10px;  cursor: pointer;  font-size: 24px; }  .carousel-btn.prev {  left: 10px; }  .carousel-btn.next {  right: 10px; }  .carousel-btn:hover {  background-color: rgba(0, 0, 0, 0.7); }  /* Add background colors for each slide */ .carousel-slide:nth-child(1) {  background-color: #cb7935; /* Carousel 1 background color*/  margin-left:10px;  margin-right:10px; }  .carousel-slide:nth-child(2) {  background-color: #C1E1FF; /* Carousel 2 background color */  margin-left:10px;  margin-right:10px; }  .carousel-slide:nth-child(3) {  background-color: #C1FFC1; /* Carousel 3 background color */  margin-left:10px;  margin-right:10px; }  .carousel-slide:nth-child(4) {  background-color: #e7ff14; /* Carousel 4 background color */  margin-left:10px;  margin-right:10px; }  .carousel-slide:nth-child(5) {  background-color: #1bf1dc; /* Carousel 5 background color */  margin-left:10px;  margin-right:10px; }  .carousel-slide:nth-child(6) {  background-color: #C1FFC1; /* Carousel 6 background color */  margin-left:10px;  margin-right:10px; }  .carousel-slide:nth-child(7) {  background-color: #0372fa; /* Carousel 7 background color */  margin-left:10px;  margin-right:10px; }#f9c1ff#f7c1ff#7d328a#d913fb  #c3c1ff#c1c2ff#4749b7#4649db /* Responsive Design */ @media (max-width: 768px) {  .carousel-heading {  font-size: 20px;  }   .carousel-text {  font-size: 14px;  } }  @media (max-width: 480px) {  .carousel-heading {  font-size: 18px;  }   .carousel-text {  font-size: 12px;  } }

Enhance the carousel by adding custom CSS in Divi’s Advanced tab. Ensure to paste the code without CSS tags for proper functionality.

Read More: [Getting Started with Divi: Advanced Settings](https://divicake.com/blog/getting-started-with-divi-advanced-settings/)

### Step 6: Add JavaScript to Create a Carousel Functionality

In this step, we will apply the JavaScript code to enable sliding and transitions, completing the carousel’s functionality.

- In the Code Module settings, return to the Content tab, scroll down, and click on Text again.
- Copy the JavaScript code provided below.
- In the Code box, scroll down and paste the JavaScript code below the HTML code from the previous step.
- Ensure that the JavaScript code includes the starting and closing tags (<script>, </script>), as they are required for proper functionality.

Copy Java Script Code From Here

<script> let currentSlide = 0; // Start from the first slide const slidesToShow = 3; // Number of slides to show at once const slides = document.querySelectorAll('.carousel-slide'); const totalSlides = slides.length;  // Clone the first and last slides for infinite looping const firstClone = slides[0].cloneNode(true); const lastClone = slides[totalSlides - 1].cloneNode(true);  // Append cloned slides const carousel = document.querySelector('.carousel'); carousel.appendChild(firstClone); carousel.insertBefore(lastClone, slides[0]);  // Add the clones to the slides count const newTotalSlides = totalSlides + 2; // Updated total slides count for clones  // Update the carousel to show the current slide function updateCarousel() {  const offset = -((currentSlide + 1) * (100 / slidesToShow)); // +1 to account for the first clone  carousel.style.transition = 'transform 0.5s ease-in-out'; // Smooth transition  carousel.style.transform = `translateX(${offset}%)`; }  // Reset transition for seamless looping function resetCarouselPosition() {  if (currentSlide >= newTotalSlides - 1) {  currentSlide = 0; // Reset to the first actual slide  carousel.style.transition = 'none'; // Remove transition to prevent flickering  carousel.style.transform = `translateX(${-(100 / slidesToShow)}%)`;  } else if (currentSlide <= 0) {  currentSlide = totalSlides; // Jump to the last actual slide  carousel.style.transition = 'none';  carousel.style.transform = `translateX(${-(totalSlides * (100 / slidesToShow))}%)`;  } }  // Move to the next slide function moveToNextSlide() {  currentSlide++;  updateCarousel();  setTimeout(resetCarouselPosition, 500); // Allow time for the transition before resetting }  // Move to the previous slide function moveToPreviousSlide() {  currentSlide--;  updateCarousel();  setTimeout(resetCarouselPosition, 500); // Allow time for the transition before resetting }  // Event listeners for buttons document.querySelector('.next').addEventListener('click', moveToNextSlide); document.querySelector('.prev').addEventListener('click', moveToPreviousSlide);  // Auto-slide every 3 seconds let autoSlideInterval = setInterval(moveToNextSlide, 3000);  // Reset auto-slide when user clicks navigation buttons function resetAutoSlide() {  clearInterval(autoSlideInterval);  autoSlideInterval = setInterval(moveToNextSlide, 3000); }  document.querySelector('.next').addEventListener('click', resetAutoSlide); document.querySelector('.prev').addEventListener('click', resetAutoSlide);  // Handle resizing window.addEventListener('resize', updateCarousel);  </script>

Add JavaScript code to enable sliding and transitions for the carousel. Ensure the script tags are included for full functionality.

Read More: [How to Use a Slider Module for Testimonials](https://divicake.com/go/how-to-use-a-slider-module-for-testimonials/)

## Step 7: How to Customize Carousel

After applying all the codes, your carousel is ready. However, you may encounter the question: how can I change this carousel to suit my needs? How can I upload my own website images, headings, and descriptions? We have provided brief details about customization, so please follow the instructions below:

- Click on the Carousel Settings icon button, as shown in the image below.
- Click on the Content tab, then click on Text to open the code.
- Find the Slide 1 (<!–Slide 1–>).
- For the image, paste your image URL between the quotation marks (“Your Image URL”) as indicated.
- For the heading, paste your heading between the tags (<h2>Heading 1</h2>) for Slide 1.
- Paste your description between the paragraph tags (<p>This is the description for the first slide</p>), as shown in the screenshots below.
- Repeat this process for all slides and replace the default data with your own.

Customize your carousel by replacing default images, headings, and descriptions. Follow the steps to input your content for each slide.

### Change Colors of Carousel

Once you have successfully uploaded your data to the carousel, you may want to change the colors for your headings, descriptions, and the background for each slide. In this step, we will show you how to set colors for all these elements.

- First, we will change the background settings for all carousel slides.
- Open the Code Module settings again and this time click on the Advanced tab, then click on Custom CSS, as shown in the screenshot below.
- Locate the carousel slide class (.carousel-slide).
- As illustrated in the image below, change the background color by clicking on the color button (the circular icon).

Customize the carousel by changing colors for headings, descriptions, and slide backgrounds. Adjust the background color in the Custom CSS settings.

### Change Carousel’s Title and Description Color

In this step, we will show you how to change the title and description colors. Ensure that your Custom CSS Code box is open.

- Locate the carousel heading class (.carousel-heading) and click on the color button to change the heading color easily.
- Find the carousel text class (.carousel-text), as shown in the screenshot below, and click on the color button to modify the text color.

Change the title and description colors in the carousel by accessing the Custom CSS settings. Adjust the colors for better visual appeal.

Read More: [Divi Blurb Module Slider Layout Pack](https://divicake.com/go/divi-blurb-module-slider-layout-pack/)

### Change Carousel’s Slide Background Color

In this step, we will show you how to change the background color for all slides separately, one by one. The process is the same for each slide.

- Locate the carousel slide class (.carousel-slide:nth-child(1)) for Slide 1.
- Click on the color button, as shown in the image below. The current background color is red; change it according to your preference.
- Repeat this process for all slides individually, changing the colors in the same order as indicated in the image below. You can differentiate the slides by their numbers (nth-child(1), nth-child(2), nth-child(3), etc.).

Customizing Background Colors for Carousel Slides

## Final Result of Creating a carousel

The GIF below showcases the final result, demonstrating the creation of a beautiful 3D carousel with ease.

View the final result of the carousel, featuring a stunning 3D design. The GIF illustrates the smooth functionality and appearance of the completed carousel.

## Conclusion

Creating a carousel without relying on a plugin in [Divi](https://divicake.com/go/divi/) allows for greater customization and flexibility, giving you full control over the design and functionality of your site. In this tutorial, we demonstrated how to build a stunning 3D carousel using HTML, CSS, and JavaScript. By following the step-by-step process, you can easily implement your unique content and modify the appearance to suit your brand.

This DIY approach not only enhances your web design skills but also optimizes your site’s performance by reducing plugin dependencies. Now that you have a fully functional carousel, you can showcase your images and messages in a captivating way, enhancing user engagement on your website.

Read More:[12 Highly Responsive Divi Carousel Plugins and Layouts in 2024](https://divicake.com/blog/divi-carousel-plugins-and-layouts/)

About the author

Written by Divi Cake.

## Submit a comment

Comments are read before they appear. Your email is not published.

Comment

NameEmail

Company website

Submit commentSubmit commentSubmit comment

The comment form needs JavaScript for its spam check.

Thanks. Your comment is waiting for review and will appear here once it is approved.

## Do you need help with …

- [Divi websites](https://divicake.com/divi-website-development/)
- [Divi plugins](https://divicake.com/divi-plugin-development/)
- [Fix a site](https://divicake.com/fix-existing-site/)
- [Beyond Divi](https://divicake.com/beyond-divi/)
- [Technical SEO](https://divicake.com/technical-seo/)
- [SEO content](https://divicake.com/seo-content/)

## Save Annually on Divi

[Save 69% on Divi VIP](https://divicake.com/go/divi-vip/)[Save 69% on Divi Cloud](https://divicake.com/go/divi-cloud/)[Save 69%, Divi Team](https://divicake.com/go/divi-teams/)

## WordPress Hosting & Tools

[100% off on Kinsta for 1 Month](https://divicake.com/go/kinsta/)[Get up to 62% off Bluehost hosting.](https://divicake.com/go/wordpress-hosting-blue-host/)[Save Up to 15% on Rank Math](https://divicake.com/go/rank-math/)[Get 50% OFF on all WPForms plans](https://divicake.com/go/wpforms/)

## More in Tips & Tricks

[

Divi Condition Options Explained

Tips & Tricks6 min read

### Divi Condition Options Explained

How Divi condition options work: show or hide any section, row, column or module by post info, location, user, interaction, device or WooCommerce state.

3 October 2026](https://divicake.com/blog/a-look-at-the-new-divi-condition-options/)

[

Divi 5 Video Autoplay (No Plugin): How to Autoplay Videos in the Divi Video Module

Tips & Tricks6 min read

### Divi 5 Video Autoplay (No Plugin): How to Autoplay Videos in the Divi Video Module

Set Divi 5 video autoplay with the built in Video module settings, muted playback, and loop options, no plugin or custom code needed for it to work on phones.

26 February 2026](https://divicake.com/blog/divi-5-video-autoplay-no-plugin/)

[

Divi Pro Pricing Explained: Is the Bundle Better Than Buying Add-Ons Separately?

Reviews7 min read

### Divi Pro Pricing Explained: Is the Bundle Better Than Buying Add-Ons Separately?

Divi Pro pricing bundles AI, hosting, cloud and support into one plan. See what each add-on costs alone and the point where the bundle stops paying off.

25 February 2026](https://divicake.com/blog/divi-pro-pricing-bundle-vs-addons/)