R41: How to Create a Scrolling Module Carousel in Divi

Recipe #23 – How to Create a Scrolling Image Carousel in Divi is by far our most popular tutorial, and it has gone through a few interations, both to make it more user friendly if you want to customise it, and also to keep up with Divi updates. Rather than update that recipe again (there are some issues in Edge), I thought I would take a new approach.

A few months ago I decided I would officially declare no support for IE. Let’s face it, it’s always been a pile of 💩 and even Microsoft doesn’t support it anymore, so why should we? Plus, the single best thing about not supporting IE, is the world of opportunities it opens up for CSS. Namely, Grid and Variables!

Grid means we don’t need columns or floats, and Variables mean we don’t need to search through hundreds of lines of code to change values, keeping it super simple to modify for your needs.

So, in this recipe, I am going to show you How to Create a Scrolling Module Carousel in Divi using CSS Grid and Variables, which will work in all modern browsers across all device sizes. And the best thing? Because it uses Variables, the only thing you have to do is adjust a few numbers to make it work for however many modules you want to display in your carousel, seriously, that’s it!

And notice I said ‘modules’ and not ‘image’? That’s because this will work with (almost) any of Divi’s native modules. You can use an image, CTA,  Button, Counter, Person, Testimonial, Blurb etc. etc., or a mixture of all of them.

The only modules you can’t use are the feed modules, so the Gallery, Portfolio, Blog & Shop modules. That’s because they already use a grid type layout and require some more work, but maybe I will get to that at a later date

So let’s get cooking!

Ingredients

The Divi Theme from Elegant Themes

Cooking time

Less than 15 minutes!

Preparation

For our prep we are going to set up the container. Create a new standard section on the page you want to display your carousel and add a single row. Open up the row settings and in the Sizing section of the Design tab, apply the following settings:

Make this row fullwidth = Yes
Use custom gutter width = Yes
Gutter width = 1

Then, in the Advanced tab, give the row a CSS Class of ds-carousel.

Now Save & Exit your row. Ok, that’s out prep done.

Method

Now, in your row add a new module. I am going to use the image module for this recipe, but as mentioned earlier you have the option of using any of the non-feed modules. Because we have set this row to have a gutter of 1, there will be no spacing between each module in the carousel. If you want spacing, then add left and right padding within the module itself. You can then make any other styling adjustments you wish.

Once you have your module set up how you want it, duplicate it for the number of modules you want in your carousel. I am going to go with eight, so my row will look like this:

Next, go into each module and swap out any content you need to. I have just added a different image for each module.

Once you are done there is a little more duplication to do. Duplicate each of your modules once, so you have two sets of your modules, all within the same row, like this:

Your second set of modules will need to be identical to the first set, this is what enables us to create a continuous scroll. So if you change anything in a module in the first set, be sure to make the same changes in the corresponding module in the second set.

Ok good, time for the fun stuff!

Now this CSS may look a little daunting if you are new to Variables, but don’t worry, I am going to explain everything and then you only need to edit a few values and you’re done.

If you haven’t heard of CSS Variables before or you aren’t sure what they are, they are simply a way to define the value of a CSS property in a single location, and then reuse that value throughout your CSS.

So for instance, you may use a colour multiple times within a stylesheet, but if you wanted to change that colour later, you would need to change every instance of it in your stylesheet. But with variables, you define that colour in a single location, and then just refer to that variable throughout your stylesheet, so when you change the value of that variable, it changes the colour everywhere. Cool eh?.

So first, let’s go over what we are doing.

Our first section is where we set variables for our carousel content, layout and speed.  The rest of our CSS will refer to these variables and these are the only things you will need to change.

:root {
    --ds-module-number: 16;
    --ds-columns-desktop: 6;
    --ds-columns-tablet: 4;
    --ds-columns-mobile: 2;
    --ds-speed-desktop: 30s;
    --ds-speed-tablet: 30s;
    --ds-speed-mobile: 30s;
}

We then set some device specific variables using calculations from the variables we set in our first section. This allows us to adjust the number of items shown on the screen and the speed of our animation for desktop, tablets and mobile.

@media all and (min-width: 981px) {
    :root {
        --ds-column-width: auto;
        --ds-module-width: calc(100vw / var(--ds-columns-desktop));
        --ds-column-animation: calc(var(--ds-module-width) - (var(--ds-module-width) * 2));
        --ds-scroll-speed: var(--ds-speed-desktop);
    }
}

@media all and (max-width: 980px) {
    :root {
        --ds-column-width: auto;
        --ds-module-width: calc(100vw / var(--ds-columns-tablet));
        --ds-column-animation: calc(var(--ds-module-width) - (var(--ds-module-width) * 2));
        --ds-scroll-speed: var(--ds-speed-tablet);
    }
}

@media all and (max-width: 479px) {
    :root {
        --ds-module-width: calc(100vw / var(--ds-columns-mobile));
        --ds-scroll-speed: var(--ds-speed-mobile);
    }
}

Next, we hide any overflow for our carousel to avoid a horizontal scrollbar. We then set the container to display as grid, allowing us to define the number of columns by pulling in the values from the variables we set in the first and second sections. We also define the width of each module from our variables.

.ds-carousel {
    overflow: hidden;
}

.ds-carousel .et_pb_column {
    display: grid;
    grid-template-columns: repeat(var(--ds-module-number), var(--ds-module-width));
    width: var(--ds-column-width);
    -webkit-animation: scroll var(--ds-scroll-speed) linear infinite;
    animation: scroll var(--ds-scroll-speed) linear infinite;
}

.ds-carousel .et_pb_module {
    width: var(--ds-module-width) !important;
}

This is our actual animation, we move the carousel from its starting position to its end position based on the values of the variables we initially set, and because we used ‘infinite’ in our animation settings above, it will continue indefinately.

@-webkit-keyframes scroll {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2)));
        transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2)));
    }
}

@keyframes scroll {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2)));
        transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2)));
    }
}

And finally, (this section is optional), we pause the animation when the user hovers over our carousel.

.ds-carousel .et_pb_column:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

Copy all the CSS from the toggle below and paste into your Child Theme Stylesheet or Divi > Theme Options > Custom CSS.

The CSS provided is for a carousel of 8 items. 6 showing on desktop, 4 on tablet and 2 on mobile, all with a speed of 30s, this is the time it will take for our 8 modules to move completely across the screen.

When we set our carousel up, we created our modules, and then duplicated them once, so with 8 unique modules, we end up with a total of 16.

16 is the number you enter for the –ds-module-number variable:

--ds-module-number: 16; /*Your TOTAL number of modules, so if you have 8 modules duplicated, this number should be 16*/

The next 3 variables define the number of columns for desktop, tablet and mobile. If you resize the window in the demo you will see that the number of modules that fit on the screen on tablets and mobile is less than desktop, so these variables are where you define how many you want to show for different screen sizes.

--ds-columns-desktop: 6; /*The number of modules you want displayed at any one time on desktop*/
--ds-columns-tablet: 4; /*The number of modules you want displayed at any one time on tablet*/
--ds-columns-mobile: 2; /*The number of modules you want displayed at any one time on mobile*/

And finally the speed of the animation for different screen sizes. I have set these all to 30 seconds as I think its a reasonable speed that works well across device sizes, but I have added 3 options for you in case you want them to be different, just change the 30s value for each variable, increase it for a slower carousel and decrease it for a faster carousel.

--ds-speed-desktop: 30s; /*The speed you want your carousel to move on desktop (increase value for slower, decrease for faster)*/
--ds-speed-tablet: 30s; /*The speed you want your carousel to move on tablet (increase value for slower, decrease for faster)*/
--ds-speed-mobile: 30s; /*The speed you want your carousel to move on mobile (increase value for slower, decrease for faster)*/

And that’s it! You can use CSS Variables with literally any CSS property to make customising and changing your code quick and easy, and CSS Grid will open up a whole new world of layout options for you, check out my intro recipe to using CSS Grid with Divi here.

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.

Michelle X