Select Page

How to Create a Carousel Slider in Divi Without a Plugin

by Sep 3, 2021Divi Freebies, Tutorials

In this tutorial, you will learn how to create a carousel slider in Divi without using a plugin. We will add a custom PHP code that will initialize a carousel functionality and create custom carousel items using the Divi Blurb modules.

Carousel sliders are very popular in web design. They can help you display services, images, features and any other content you might have which normally would take a lot of space, but if you use the carousel you can save that space and improve the user experience significantly.

In this tutorial, I will show you how to add carousel functionality to your Divi website. We will use the 3rd party Swiper.js library and some custom CSS to style the slider just like we want.

To add the slider functionality to your Divi website, you need to call the swiper.js in your child theme’s functions.php file. If you don’t use a child theme yet, you can build one using our tutorial on How to Create a WordPress Child Theme for Divi or create a child theme with our free child theme generator.

We have also prepared a free Divi section with a beautiful slider layout which can be downloaded for free. If you go that route, then you can skip steps 2 and 3 from the below tutorial. You will still need to enqueue swiper.js and add configuration code to your child theme’s functions.php file (see step 1).

1

Add custom code to functions.php

To make our slider working, we need to enqueue the swiper.js library in our child theme’s functions.php file and add some configuration code to determine how many columns in our slider will be displayed, if we want to loop slides, enable arrow navigation and pagination… and more 😁 For a full list of available settings, please check Swiper API page. Now let’s get to work.

All PHP code must be added to the Divi’s child theme functions.php file. You can edit this file using FTP, File Manager on your server, or Theme Editor available in the WP Dashboard. I will use Theme Editor.

To enqueue the swiper.js library, in our child theme, please follow these steps:

  1. Go to Appearance → Theme Editor
  2. Open your child theme’s functions.php file
  3. Add custom PHP code
  4. Click Update File
h

PHP

<?php
// Enqueue Swiper.js Library
function dp_carousel(){
   wp_enqueue_script( 'your-swiper-js-slug', 'https://unpkg.com/[email protected]/swiper-bundle.min.js', [] , '7.0.2', ture );
   wp_enqueue_style( 'your-swiper-css-slug', 'https://unpkg.com/[email protected]/swiper-bundle.min.css', [] , '7.0.2');
}
add_action('init', dp_carousel, 99);

function dp_carousel_slider_scripts() {
?>
  <script type="text/javascript">
  // adding navigation html
  (function(){
      window.addEventListener('DOMContentLoaded', swiper_init);
      function swiper_init(){
         window.removeEventListener('DOMContentLoaded', swiper_init);
         // configuration
         const slider = document.getElementById('dp-carousel');
         if(slider === null) return;

         // extra controls
         let extraControls = '';

         // If we need pagination 
         extraControls += '<div class="swiper-pagination"></div>';

         // If we need navigation buttons 
         extraControls += '<div class="swiper-button-prev"></div><div class="swiper-button-next"></div>';

         slider.innerHTML = '<div class="swiper-container" style="overflow:hidden">' + slider.innerHTML + '</div>' + extraControls;

         // Wait for Swiper
         var waitForSwiper = setInterval( function () {
         if (typeof Swiper != "undefined"){ 
            clearInterval(waitForSwiper);
            const swiper = new Swiper( '#dp-carousel .swiper-container' , {
            slidesPerView: 1, // mobile value
            loop: true,
            spaceBetween: 0, // mobile value
               autoplay: {
               delay: 3000,
            },
            speed: 600,
            // If we need pagination
            pagination: {
               el: '.swiper-pagination',
               clickable : true,
               dynamicBullets: true
            },
            // Navigation arrows
            navigation: {
               nextEl: '.swiper-button-next',
               prevEl: '.swiper-button-prev',
            },
            breakpoints: {
               768: { // Tablet
                  slidesPerView: 2,
                  spaceBetween: 20,
               },
               981: { // Desktop
                  slidesPerView: 3,
                  spaceBetween: 30,
               }
            }
        });
      }}, 20);
   }
})();
</script>
<?php }
add_action( 'wp_footer', dp_carousel_slider_scripts); 

2

Create layouts for the carousel using the Divi Builder

Now we need to design all items that will be displayed in our slider using the Divi Builder. We will need to add some custom classes and ID to row, column and modules. 1 column layout must be used, and it will convert to the carousel based on the column numbers we have defined in the configuration PHP code.

For this tutorial, I have used Blurb modules with some cool styling and hover effects, but feel free to use any Divi module you want.

Configure Row and Column

 

  • Add Section with single column layout
  • Add ID Class dp-carousel to the Row
  • Add CSS Class swiper-wrapper to Column
  • Add CSS Class swiper-slide to each module
  1. Using the Divi Builder on your page, add a section with 1 column row
  2. Search for the Blurb module and add it to the page
  1. Open Row settings by clicking the gear icon in the green toolbar
  2. Go to Advanced → CSS ID & Classes
  3. Add dp_carousel to CSS ID field
  1. Switch to Content tab
  2. Open Column settings
  3. Add swiper-wrapper class to CSS Class field
Blurb Module Customization
  1. Open Blurb module settings
  2. Go to Advanced tab
  3. Add swiper-slide to CSS Class field
  1. Go to the Content tab and open the Text toggle
  2. Add Title and Body texts
  3. In Background toggle add Background Image
  1. Customize Title style in Design → Title Text toggle
Here are my settings:
  • Title Font – Abhaya Libre
  • Color – #415962
  • Title Text Size – 26px and 22px on mobiles
  1. Customize Body text style in Design → Body Text toggle
My settings:
  • Title Font – Open Sans
  • Color – #879296
  • Body Text Size – 14px and 12px on mobiles
  • Body Line Height: 1.5em
Add Blurb Spacing and Custom CSS

In this last step we need to add a Blurb Spacing and Custom CSS to apply white background to the content container and zoom animation to the background image.

  1. In Blurb settings go to Design → Spacing toggle
  2. Add Padding for desktops 300px/1.5vw/1.5vw/1.5vw
  3. Add Padding for tablets 220px/30px/30px/30px
  4. Add Padding for mobiles 200px/20px/20px/20px
  1. Go to Advanced tab and open Custom CSS toggle
  2. Add background size and transition to Main Element field
    background-size: 100%;
    transition: all .5s;
  3. Add background size and transition to Main Element on hover
    background-size: 105%;
    transition: all .5s;
  1. Add background color and padding to Blurb Content Custom CSS field
    background-color: white;
    padding: 30px 1.5vw;
  2. Add background color and padding to Blurb Content field on hover
    background-color: white;
    padding: 30px 4vw;
Duplicate your Blurb module

Now, we have the Blurb module ready so we can duplicate it as many times as we want to add new blurbs to our carousel. In each duplicated module you only need to replace texts and change the background image.

3

Add Custom CSS for arrow navigation and pagination

Our slider is almost ready. In this last step we need to add some custom CSS to style our slider navigation and pagination. This code can be added to the Divi/Theme Options/Custom CSS or to your child theme’s style.css file.

h

CSS



/* DP Slider Navigation */

#dp-carousel .swiper-button-prev {
     transform: none;
     margin-top: -100px;
     top: 10px !important;
     margin-left: auto!important;
     right: 52px;
     font-size: 20px !important;
     background-color: #fff;
     padding: 25px !important;
}
#dp-carousel .swiper-button-next {
     transform: none;
     top: 10px !important;
     margin-top:-100px;
     right: 0px !important;
     background-color: #fff;
     padding: 25px !important;
}

/* Arrow Size and Style */

.swiper-button-next:after, .swiper-button-prev:after {
     font-size: 20px;
     color: #aed4e4;
}

/* DP Slider Pagination */

#dp-carousel .swiper-pagination-bullet-active {
     background-color: #fff;
}
#dp-carousel .swiper-pagination-bullet {
     background-color: #fff;
     top: 15px;
}


Divi Pixel Carousel Slider for Divi

The Divi Pixel plugin is a premium solution for Divi designers and developers. It comes with over 200 Divi theme settings and 31 powerful modules that will enhance your Divi builder capabilities.

With Divi Pixel you can easily create carousel sections in the Divi theme. You can use default elements, like Icons, Title Text, Descriptions, and Buttons, or select Divi Library items to be displayed in your carousel module. This creates unlimited possibilities. In other words, with the Divi Pixel Carousel module, you can slide anything! This module gives you total control over slider style and content displayed, and this all can be done in the module settings, without writing a single line of custom code.

This is it! We hope you enjoy reading this tutorial. Adding a slider to your Divi website is a great idea and can help you display your content in a more engaging and beautiful way. Whenever you use custom code or 3rd party plugin for carousels, make sure they are working on mobiles devices.

Maciej Ekstedt

Maciej Ekstedt

Maciej is the co-founder and CEO of Divi Pixel. He is a self-made web designer and marketing expert, and he loves his job so much that he barely leaves the office. He transforms creative ideas into effective strategies for his company and for his clients. Maciej is fascinated by the phenomenon of megalopolis. He notices patterns and details which make up the whole thing, and he uses these skills in his work.