It’s true that Divi doesn’t have any carousel module, but it doesn’t mean you cannot create one. With the help of a plugin, or even without one, you can add a carousel to your Divi website. In this guide, we will show you both methods for you.
Two Ways to Create a Carousel in Divi: With Plugin & Without Plugin
Both with and without plugin options have separate advantages and limitations. For example, if you go for a plugin you won’t have to write a single line of code.
On the other hand, you have to write lines of JavaScript and CSS codes to create a carousel without a plugin.
That’s why it’s always better to go for the plugin as they provide pre-built features, and advanced customization. Some top Divi carousel plugins are:
- Divi Carousel Module 3.0 to create content, image, video, image, logo, team and testimonial carousels.
- DiviFlash to create image, logo, post, and 6 other carousel types.
- Divi Carousel Maker to create image, post and product carousel (free option.)
How to Create a Carousel in Divi Using Plugin
To show you the creation process, we are going to use Divi Carousel Module 3.0. And here are the step-by-step instructions:
Step 1: Install Plugin
Start with purchasing the plugin from DiviGear and then follow the steps below:
- After purchasing, download the plugin ZIP file from your DiviGear account.
- Log in to your WordPress admin panel.
- Click on Plugins > Add New in the left sidebar.
- Click Upload Plugin, then Choose File, and select the downloaded ZIP file.
- Click Install Now, wait for the installation to complete, then click Activate Plugin.
Step 2: Configure Carousel-related Settings
After activating the Divi Carousel Module 3.0, insert it to your page or post. Then click on “Add New Item” to add images, text, videos or button items.
You can add as many carousel items as you want. And after adding your desired items, proceed to configure the carousel settings by clicking on “Slider Settings” and “Advanced Slider Settings.”
You can configure the following settings:
- Show Item Desktop, Tablet, and Mobile: Controls slide visibility on different devices.
- Multislide: Displays multiple slides at once.
- Center Slide: Centers the active slide.
- Loop: Enables continuous carousel cycling.
- Autoplay: Automatically advances slides.
- Arrow and Dot Navigation: Adds navigation controls.
- Lazy Loading: Delays image loading for faster page speed.
- Slider Effect: Choose from two different slider effects (default and coverflow.)
Besides these, you will find many other carousel related settings that you can apply based on your needs. To know more about the settings, refer to Divi Carousel’s documentation.
Step 3: Design Carousel
There are more than hundreds of customization options offered by the Divi Carousel module that you can use. Simply access the customization setting options by navigating to the module’s “Design” tab.
There you will see customization settings options for:
- Image
- Title
- Subtitle
- Body text
- Navigation button
- Active and inactive slide
- Custom spacing and more.
By using all of them, you can easily design your created carousel the way you want.
And to see the design possibilities of Divi carousel modules, you can check out its demos that are free to download and use.
Step 4: Publish Your Carousel
Once you are happy with your created carousel, simply click on publish or update your page or post to make it live on your site.
How to Create a Carousel in Divi without using Plugin
Instead of using a plugin, you can create a carousel in Divi with custom coding. This requires writing JavaScript and CSS to build and style the carousel.
We will show you the step by step process:
Step 1: Setup Section and Row
Setting up section and row means adding CSS class to section and row settings. Here is how you will do it:
1.1: Setup Section
- Open the Divi Builder and add a New Section.
- Click on Section Settings > Advanced Tab.
- Under CSS ID & Classes, add this CSS ID “df_custom_carousel”
1.2: Setup Row
- Inside the section, click the + icon to add a row.
- Choose a 4 column layout (you can adjust this later) and click on Row settings.
- Navigate to the Design tab > Sizing to adjust the width and height.
- Next, go to Advanced tab > CSS ID & Classes and then add this class “swiper-wrapper”
- Next, from the “Content” tab click on each column’s settings icon, navigate to Advanced tab > CSS ID & Class and add this class “swiper-slide” (You have to add the same class to all columns)
- Next in the Advanced tab, click on Custom CSS > Module Elements and paste this CSS code “margin-left:40px;” to the “Main Element” field.” (you only have to do this for the first column)
Step 2: Add Carousel Item
Once your section and row setup is done, proceed with adding carousel items. You can use any module for the carousel, but we will use the Blurb Module to show you the process:
- Click on the + (Add Module) icon inside the first column.
- Select the Blurb Module.
- Customize the Blurb Module by adding:
- A title
- Description text
- An image or icon
- Repeat this process for the other columns, adding a Blurb Module inside each one.
While adding a module, customize the content and design of each module according to your design needs.
Step 3: Add Custom CSS and JavaScript to the Theme Setting
Now that you have set up the section, row, and carousel items, the next step is to add custom CSS and JavaScript to the Divi Theme Options. You have to add CSS for styling and JavaScript for the carousel’s functionality.
Here are the CSS and JavaScript that you have to add to the Theme Options:
3.1: Add CSS
- Navigate to the Divi > Theme Options > General from your WordPress dashboard
- Then add the following CSS to the Custom CSS option:
#df_custom_carousel .swiper-slide {
height: 472px !important;
width: 300px;
}
#df_custom_carousel .swiper-slide:hover .et_pb_blurb_container > * {
color: #000000 !important;
}
.et_pb_gutters3 #df_custom_carousel .et_pb_column,
#df_custom_carousel .et_pb_row .et_pb_column {
margin-right: unset;
}
#df_custom_carousel .swiper-pagination {
width: 100%;
height: auto;
}
/* Custom Navigation Buttons Styling */
.custom-prev-button,
.custom-next-button {
position: absolute;
/*top: 10px;*/ /* Distance from the top */
z-index: 10;
background: transparent;
padding: 15px;
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: #fff; /* White arrow */
text-align: center;
cursor: pointer;
transition: color 0.3s ease;
font-size: 20px; /* Adjust size as needed */
background: #000;
}
/* Position Previous Button */
.custom-prev-button {
right: 40px; /* Distance from the right edge */
}
/* Position Next Button */
.custom-next-button {
right: 0px; /* Distance from the right edge */
}
/* Hover Effect for Custom Buttons */
.custom-prev-button:hover,
.custom-next-button:hover {
color: rgba(255, 255, 255, 0.8);
}
/* Add Font Awesome Icons */
.custom-prev-button::before {
content: "\f060"; /* Font Awesome code for left arrow */
}
.custom-next-button::before {
content: "\f061"; /* Font Awesome code for right arrow */
}3.2: Add JavaScript
- Navigate to the Integration from the Divi Theme Options
- Then add the following code to the “Add code to the < head > of your blog” option:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"> </script>
<script >
(function($) {
window.addEventListener('DOMContentLoaded', function() {
let sliders = document.querySelectorAll('#df_custom_carousel');
sliders.forEach(function(slider) {
initializeSwiper(slider);
});
});
function initializeSwiper(slider) {
if (slider === null) return;
// Extra controls HTML
let extraControls = `<div class="swiper-pagination">
<div class="custom-prev-button"></div>
<div class="custom-next-button"> </div></div>`;
slider.innerHTML = `<div class="swiper-container" style="overflow:hidden;">${slider.innerHTML}</div>${extraControls}`;
// Wait for Swiper to be loaded
const waitForSwiper = setInterval(function() {
if (typeof Swiper !== 'undefined') {
clearInterval(waitForSwiper);
const carouselContainer = slider.querySelector('.swiper-container');
new Swiper(carouselContainer, {
slidesPerView: 1,
loop: true,
spaceBetween: 40,
autoplay: {
delay: 1000,
},
speed: 600,
navigation: {
nextEl: '.custom-next-button',
prevEl: '.custom-prev-button',
},
breakpoints: {
768: { // Tablet
slidesPerView: 2,
spaceBetween: 20,
},
981: { // Desktop
slidesPerView: 4,
spaceBetween: 40,
}
}
});
}
}, 20);
}
})(jQuery)
</script>Step 4: Save and Preview
If you have followed all the steps correctly, your carousel should now be functioning. Simply save your changes and preview the page to ensure it looks and works as expected.
Here is what your carousel design should look like:
Which One is Best Approach to Create a Carousel in Divi Between with Plugin and without Plugin?
Without a doubt, using a plugin is the best approach for creating a carousel in Divi. A plugin provides a hassle-free, feature-rich solution without requiring custom coding.
Writing JavaScript and CSS can be time-consuming and challenging. Additionally, this approach requires ongoing maintenance, such as manual updates and troubleshooting, to ensure compatibility.
The no-plugin method also lacks advanced customization options and user-friendly controls. For these reasons, using a plugin like Divi Carousel is the ideal choice for creating a seamless and fully functional carousel in Divi.
FAQs about Creating Carousel in Divi
- What is a carousel in Divi?
A carousel in Divi is an interactive design element that allows you to display multiple pieces of content (such as images, text, or testimonials) in a sliding container.
- What is a slider in Divi?
Slider is a default module in Divi. With this module, you can create sliding content with multiple slides, each containing images, text, buttons, or other elements.
- What’s the difference between a slider and a carousel?
A slider shows one slide at a time, while a carousel displays multiple items at once. Sliders work well for hero sections, while carousels are great for product showcases and image galleries with smooth scrolling.
- What is the best plugin for Divi Carousels?
DiviGear’s Divi Carousel module is the best Divi plugin for creating carousels. It is the top-rated and best-selling carousel plugin in the Elegant Themes marketplace.
Conclusion
As we provided a step-by-step guide on how to create carousel in Divi, you can now easily build one for your site. We covered both methods with and without a plugin so you know all your options.
However, we recommend using a plugin, as it simplifies the process and requires no coding. Otherwise, you will need to write and manage custom code to create a carousel without a plugin.
Ultimately, the choice is yours!
If you need help selecting or setting up a plugin, feel free to comment. Our expert team is here to assist you in finding the best solution.
0 Comments