Create a Carousel in Divi Without a Plugin

by | Oct 29, 2024 | Tips & Tricks, Tutorials | 0 comments

Affiliate Disclosure: Some of the links in this post are affiliate links, which means we may earn a commission if you click through and make a purchase. For more details, please read our Affiliate Disclosure Policy.

Create a carousel in Divi without using a plugin is quite manageable. In this comprehensive tutorial, we’ll guide you through building a carousel using HTML, CSS, 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 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.

  1. Navigate to the Pages section on the left sidebar.
  2. 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:

  1. In the Divi Builder, click on the + icon to add a new module.
  2. Search for the Code module and select it.
  3. 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

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:

  1. Click on the Content Tab, then click on Text.
  2. Copy the HTML code provided below.
  3. 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

Step 5: Add Custom CSS Styles

In this step, we will further enhance the carousel module by adding custom CSS code to make it more attractive and visually appealing.

  1. In the Code Module settings, click on the Advanced Tab.
  2. Scroll down and click on Custom CSS.
  3. Copy the CSS code provided below and paste it into the Main Element section.
  4. 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

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.

  1. In the Code Module settings, return to the Content tab, scroll down, and click on Text again.
  2. Copy the JavaScript code provided below.
  3. In the Code box, scroll down and paste the JavaScript code below the HTML code from the previous step.
  4. 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

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:

  1. Click on the Carousel Settings icon button, as shown in the image below.
  2. Click on the Content tab, then click on Text to open the code.
  3. Find the Slide 1 (<!–Slide 1–>).
  4. For the image, paste your image URL between the quotation marks (“Your Image URL”) as indicated.
  5. For the heading, paste your heading between the tags (<h2>Heading 1</h2>) for Slide 1.
  6. Paste your description between the paragraph tags (<p>This is the description for the first slide</p>), as shown in the screenshots below.
  7. 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.

  1. First, we will change the background settings for all carousel slides.
  2. 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.
  3. Locate the carousel slide class (.carousel-slide).
  4. 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.

  1. Locate the carousel heading class (.carousel-heading) and click on the color button to change the heading color easily.
  2. 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

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.

  1. Locate the carousel slide class (.carousel-slide:nth-child(1)) for Slide 1.
  2. Click on the color button, as shown in the image below. The current background color is red; change it according to your preference.
  3. 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 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

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Stay ahead with the Latest WordPress Insights

Subscribe for tips, updates, and exclusive tools to elevate your website game.

Newsletter

No spam ever. Only Divi related updates. You need this.

Pin It on Pinterest

Shares