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.
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.
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.
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:
- 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>
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.
- 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;
}
}
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.
- 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>
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:
- 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.
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).
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.
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.
- 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.).
Final Result of Creating a carousel
The GIF below showcases the final result, demonstrating the creation of a beautiful 3D carousel with ease.
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