Follow us

How to Create a Scrolling Image Carousel in Divi | Divi Soup

Want to learn how to use CSS with Divi?

Our CSS & Divi Beginner Course is now open for enrollment!

UPDATE 2nd June 2018: Ok Soupies, a new recipe for this is now live. Recipe #41 – How to Create a Scrolling Module Carousel in Divi takes this to a whole new level. Now you can use almost any module and you only have to change a few values to customise it for your exact needs. Enjoy x

 

UPDATE 7th May 2018: Recipe #23 – How to create a scrolling image carousel continues to be the most popular recipe on Divi Soup. We know there are some issues with browsers like Microsoft Edge, due to updates within the application. We also know that many want to customize the recipe for a variety of reasons. With that in mind, Michelle will be posting a revised recipe in the near future that is easier to use and customize, and also works with the latest updated browsers. In the meantime, we kindly ask for your patience.

 

UPDATE: 29th July 2017: Recipe #23 – How to create a scrolling image carousel is so far the most popular recipe on Divi Soup. It has the most page views and most comments with around 300 at the time of updating this post.

The majority of those comments are from Soupies looking to increase the number of images displayed and whilst this can be done, it may not be that easy unless you are comfortable with more advanced CSS. Whilst I try to help as many as I can, its very difficult to keep up with individual requests and there are only so many hours in the day wink

So with that in mind, I have completely rewritten this post with a view to streamlining the code and making it easier for you to change it to fit your needs. In this update I have:

  • Refined the code and removed superfluous properties
  • Consolidate code where possible and switched to shorthand animation
  • Reduced the places code needs to be edited to change the number images
  • Configured the effect so no extra padding is added across devices
  • Removed the need for media queries
  • Added a pause on hover effect
  • Included code to display 10, 15, 20 and 25 images.
  • Included free JSON files for 10, 15, 20 and 25 images.

So let’s get cooking!

Ingredients

 

The Divi Theme from Elegant Themes

10 images 200 x 200px

 

Cooking time

 

This should take you around 15 minutes max.

 

Preparation

 

The first thing we need to do is set up our section. So add a new section with one column and then in the Advanced tab give it a CSS class of ds-carousel-section. 

How to create a scrolling image carousel divi tutorial

 

Next, in the Design tab give the section a top and bottom padding of 0. Then save & exit.

How to create a scrolling image carousel divi tutorial

 

Now open up the row settings and in the Design tab apply the following:

Make this row fullwidth: Yes
Use custom gutter width: Yes
Gutter width: 1
Custom margin, Custom padding and Column padding: Top = 0 Bottom = 0

How to create a scrolling image carousel divi tutorial

How to create a scrolling image carousel divi tutorial

 

Finally, in the Advanced tab give the row 2 custom CSS classes of ds-image-carousel and ds-image-carousel-first with a single space in between.

How to create a scrolling image carousel divi tutorial

 

Then save & exit.

OK, that’s our prep done.

 

Method

 

Next, add an image module to your row and click Upload an Image, then upload your 200 x 200px image to the media library and select it to add it to the module.

How to create a scrolling image carousel divi tutorial

 

If you want your image to link to a page then enter the URL in the Link URL field,

How to create a scrolling image carousel divi tutorial

 

Then in the Design tab set Image Alignment to Center and Always center image on mobile to Yes  Leave all other settings at their default.

How to create a scrolling image carousel divi tutorial

 

Finally, click on the Advanced tab and give the module a CSS Class of ds-carousel-logo, and then scroll to the bottom and set the Animation to No Animation. Save & Exit.

How to create a scrolling image carousel divi tutorial

How to create a scrolling image carousel divi tutorial

 

Now duplicate the image module 4 times so you have 5 image modules in total. Then open up each module and swap out the images and the link URLs if you have used them so each one is unique.

 

How to create a scrolling image carousel in divi

 

Next, duplicate the Row twice so you have 3 rows, each with 5 image modules. In the second row, again swap out the images and Link URLs for each module so they are unique. Leave the third row of modules alone, the contents of the third row needs to be identical to the contents of the first row to create the continuous scrolling effect. Just remember in future if you want to change anything in the first row of modules, you need to replicate those changes in the third row as well.

 

How to create a scrolling image carousel in divi

 

Now open up the row settings for the second row, click on the Custom CSS tab and change the class ds-image-carousel-first to ds-image-carousel-second..

How to create a scrolling image carousel divi tutorial

 

And do the same in the third row, changing ds-image-carousel-first to ds-image-carousel-third.

How to create a scrolling image carousel divi tutorial

 

Now it’s time for the CSS. Here’s what we are doing:

This section stops the browser adding a horizontal scrollbar.

.ds-carousel-section {
    overflow: hidden;
}

 

Next we set the width of our image modules, as we are using 5 images we have them set to 20% (100 / 5). We are also floating them left so they appear in a row rather than stacking on top of each other as is the default behaviour.

.ds-carousel-logo {
    width: 20%;
    float: left;
}

 

Here we setting the position and visibility of the rows, we are initially having them invisible so they are only seen when the animation triggers.

.ds-image-carousel {
    float: left;
    position: absolute;
    padding: 0;
    opacity: 0;
    z-index: 0;
}

 

Next we are setting how our animation should run. The first declaration applies to the first row, this animation will run for a duration of 15 seconds and will only run once.

The second declaration applies to the second and third rows, the animation will run for 30 seconds and will run indefinitely.

The third declaration applies to the third row only and this sets a 15 second delay before the animation for that row begins.

.ds-image-carousel-first {
    position: relative;
    z-index: 1;
    -webkit-animation: first 15s 1 linear forwards;
    animation: first 15s 1 linear forwards;
}

.ds-image-carousel-second,
.ds-image-carousel-third {
    -webkit-animation: rest 30s infinite linear;
    animation: rest 30s infinite linear;
}

.ds-image-carousel-third {
    -webkit-animation-delay: 15s;
    animation-delay: 15;
}

 

Here we are defining the animation effect. I have omitted vendor prefixes for brevity but they are in the full CSS you can copy from the toggle after this explanation.

In the first set of keyframes we are defining the animation for the first row. It begins with the row in its default position and then moves it off screen to the left and then sets it to be invisible.

The second set of keyframes applies to the rest of the rows. It begins with the row off screen to the right and then moves it in a continuous motion across the screen and then off to the left.

@keyframes first {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
        z-index: 1;
    }
    99.99% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 1;
        z-index: 1;
    }
    100% {
        opacity: 0;
        z-index: 0;
    }
}

@keyframes rest {
    0.01% {
        opacity: 0;
        z-index: 0;
    }
    0.011% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        opacity: 1;
        z-index: 1;
    }
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 1;
    }
}

 

Finally, the last declaration simply makes our carousel stop moving when it is hovered over. This is something many people have asked how to do.

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

 

Copy and paste the complete code from the toggle below into your child theme stylesheet or Divi theme options custom CSS box.

You can then view your page and it should look similar to my demo.

10 Images CSS
/*-----------------------------------------------*/
/*-----Scrolling Image Carousel by Divi Soup-----*/
/*-----------------------------------------------*/


/***10 Images***/


/*Stops the browser creating a horizontal scrollbar*/

.ds-carousel-section {
    overflow: hidden;
}


/*Sets the width of the image modules and floats them so they are next to each other*/

.ds-carousel-logo {
    width: 20%;
    float: left;
}


/*Sets the position and visibility of the rows*/

.ds-image-carousel {
    float: left;
    position: absolute;
    padding: 0;
    opacity: 0;
    z-index: 0;
}


/*Position, visibility and animation settings for the first row*/

.ds-image-carousel-first {
    position: relative;
    z-index: 1;
    -webkit-animation: first 15s 1 linear forwards;
    animation: first 15s 1 linear forwards;
}


/*Animation settings for the rest of the rows*/

.ds-image-carousel-second,
.ds-image-carousel-third {
    -webkit-animation: rest 30s infinite linear;
    animation: rest 30s infinite linear;
}


/*Animation delay for the third row*/

.ds-image-carousel-third {
    -webkit-animation-delay: 15s;
    animation-delay: 15;
}


/*Animation for the continuous scrolling effect*/


/*First row - this only plays once*/

@-webkit-keyframes first {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
        z-index: 1;
    }
    99.99% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 1;
        z-index: 1;
    }
    100% {
        opacity: 0;
        z-index: 0;
    }
}

@keyframes first {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
        z-index: 1;
    }
    99.99% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 1;
        z-index: 1;
    }
    100% {
        opacity: 0;
        z-index: 0;
    }
}


/*All other rows - these play continuously*/

@-webkit-keyframes rest {
    0.01% {
        opacity: 0;
        z-index: 0;
    }
    0.011% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        opacity: 1;
        z-index: 1;
    }
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 1;
    }
}

@keyframes rest {
    0.01% {
        opacity: 0;
        z-index: 0;
    }
    0.011% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        opacity: 1;
        z-index: 1;
    }
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 1;
    }
}


/*Pause all animation on hover*/

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


/*-----------------------------------------------*/
/*---End Scrolling Image Carousel by Divi Soup---*/
/*-----------------------------------------------*/

 

But what if you want more images? Well I have already written the CSS you need for 15, 20 and 25 images, but its a little different so let’s take a look at it.

In the CSS for 20 images for example, things are slightly different. You can see from the code below that where we previously defined the animation for the second and third rows, we have also added in a fourth and fifth row and changed the duration of the animation to 60 seconds.

If we want 20 images, and each row of 5 images is on screen for 15 seconds, that totals 60 seconds. If we were using 15 images this total would be 45 seconds and for 25 images the total would be 75 seconds (see the pattern here?).

Next, we still have our 15 second delay before the animation starts on our third row, but we have also added in an animation delay for the fourth and fifth rows, increasing that delay by 15 seconds for each row.

/*Animation settings for the rest of the rows*/

.ds-image-carousel-second,
.ds-image-carousel-third,
.ds-image-carousel-fourth,
.ds-image-carousel-fifth {
    -webkit-animation: rest 60s infinite linear;
    animation: rest 60s infinite linear;
}


/*Animation delay for the third row*/

.ds-image-carousel-third {
    -webkit-animation-delay: 15s;
    animation-delay: 15;
}


/*Animation delay for the fourth row*/

.ds-image-carousel-fourth {
    -webkit-animation-delay: 30s;
    animation-delay: 30;
}


/*Animation delay for the fifth row*/

.ds-image-carousel-fifth {
    -webkit-animation-delay: 45s;
    animation-delay: 45;
}

 

The other major change is the animation effect itself. The animation for the first row will always stay the same but when we have more than 10 images we need to create delays between the animation of each row so there is a pause before that row shows again.

The animation-delay property only applies to the start of the very first iteration, so we kind of need to fake the pause.

In the CSS below we have added a waypoint in our keyframes as it were. Instead of the animation completing its cycle at 100%, it now completes at at 50% and then stays where it is until 100%, so essentially the animation is running for a total of 60 seconds, but the row has completed its movement by 30 seconds and then just waits for 30 seconds off screen to the left before moving off screen to the right and starting its cycle again.

This in conjunction with the animation delay values on each row which define when the first cycle should begin, serve to offset the movement of each row by 15 seconds so they follow each other seamlessly in a continuous motion. Can you tell I’m a little nerdy about CSS animation? wink

@keyframes rest {
    0.01% {
        opacity: 0;
        z-index: 0;
    }
    0.011% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        opacity: 1;
        z-index: 1;
    }
    50% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 1;
    }
}

 

Each of the toggles below have different properties and slightly different timing depending on the number of images you wish to use. Hopefully from these examples you either have exactly what you need or you can see how each differs and use that to edit for your own purposes.

Here is the math:

(100 / Total Animation Duration) x Row Animation Duration = Keyframe Waypoint Value

So let’s say we want to display 25 images, that’s 5 rows of 5 (not counting our last row which is always a duplicate of the first).

Each row takes 15 seconds (this is what I have set as the animation delay increment but you can change that value to change the speed if you want) to move into full view, so:

15 x 5 = 75. This is our Total Animation Duration

15 seconds is how long we have set for our row to come into full view, but then that is doubled as it takes the same amount of time for the row to move out of full view, so

15 x 2 = 30. This is our Row Animation Duration

So if we apply the calculation on those values:

(100 / 75) x 30 = 40

We get 40%, this is the value we need to add in the waypoint of the second set of keyframes which apply to all the rows except for the first.

 

15 Images CSS
/*-----------------------------------------------*/
/*-----Scrolling Image Carousel by Divi Soup-----*/
/*-----------------------------------------------*/


/***15 Images***/


/*Stops the browser creating a horizontal scrollbar*/

.ds-carousel-section {
    overflow: hidden;
}


/*Sets the width of the image modules and floats them so they are next to each other*/

.ds-carousel-logo {
    width: 20%;
    float: left;
}


/*Sets the position and visibility of the rows*/

.ds-image-carousel {
    float: left;
    position: absolute;
    padding: 0;
    opacity: 0;
    z-index: 0;
}


/*Position, visibility and animation settings for the first row*/

.ds-image-carousel-first {
    position: relative;
    z-index: 1;
    -webkit-animation: first 15s 1 linear forwards;
    animation: first 15s 1 linear forwards;
}


/*Animation settings for the rest of the rows*/

.ds-image-carousel-second,
.ds-image-carousel-third,
.ds-image-carousel-fourth {
    -webkit-animation: rest 45s infinite linear;
    animation: rest 45s infinite linear;
}


/*Animation delay for the third row*/

.ds-image-carousel-third {
    -webkit-animation-delay: 15s;
    animation-delay: 15;
}


/*Animation delay for the fourth row*/

.ds-image-carousel-fourth {
    -webkit-animation-delay: 30s;
    animation-delay: 30;
}


/*Animation for the continuous scrolling effect*/


/*First row - this only plays once*/

@-webkit-keyframes first {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
        z-index: 1;
    }
    99.99% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 1;
        z-index: 1;
    }
    100% {
        opacity: 0;
        z-index: 0;
    }
}

@keyframes first {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
        z-index: 1;
    }
    99.99% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 1;
        z-index: 1;
    }
    100% {
        opacity: 0;
        z-index: 0;
    }
}


/*All other rows - these play continuously*/

@-webkit-keyframes rest {
    0.01% {
        opacity: 0;
        z-index: 0;
    }
    0.011% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        opacity: 1;
        z-index: 1;
    }
    66.66% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 1;
    }
}

@keyframes rest {
    0.01% {
        opacity: 0;
        z-index: 0;
    }
    0.011% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        opacity: 1;
        z-index: 1;
    }
    66.66% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 1;
    }
}


/*Pause all animation on hover*/

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


/*-----------------------------------------------*/
/*---End Scrolling Image Carousel by Divi Soup---*/
/*-----------------------------------------------*/

 

20 Images CSS
/*-----------------------------------------------*/
/*-----Scrolling Image Carousel by Divi Soup-----*/
/*-----------------------------------------------*/


/***20 Images***/


/*Stops the browser creating a horizontal scrollbar*/

.ds-carousel-section {
    overflow: hidden;
}


/*Sets the width of the image modules and floats them so they are next to each other*/

.ds-carousel-logo {
    width: 20%;
    float: left;
}


/*Sets the position and visibility of the rows*/

.ds-image-carousel {
    float: left;
    position: absolute;
    padding: 0;
    opacity: 0;
    z-index: 0;
}


/*Position, visibility and animation settings for the first row*/

.ds-image-carousel-first {
    position: relative;
    z-index: 1;
    -webkit-animation: first 15s 1 linear forwards;
    animation: first 15s 1 linear forwards;
}


/*Animation settings for the rest of the rows*/

.ds-image-carousel-second,
.ds-image-carousel-third,
.ds-image-carousel-fourth,
.ds-image-carousel-fifth {
    -webkit-animation: rest 60s infinite linear;
    animation: rest 60s infinite linear;
}


/*Animation delay for the third row*/

.ds-image-carousel-third {
    -webkit-animation-delay: 15s;
    animation-delay: 15;
}


/*Animation delay for the fourth row*/

.ds-image-carousel-fourth {
    -webkit-animation-delay: 30s;
    animation-delay: 30;
}


/*Animation delay for the fifth row*/

.ds-image-carousel-fifth {
    -webkit-animation-delay: 45s;
    animation-delay: 45;
}


/*Animation for the continuous scrolling effect*/


/*First row - this only plays once*/

@-webkit-keyframes first {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
        z-index: 1;
    }
    99.99% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 1;
        z-index: 1;
    }
    100% {
        opacity: 0;
        z-index: 0;
    }
}

@keyframes first {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
        z-index: 1;
    }
    99.99% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 1;
        z-index: 1;
    }
    100% {
        opacity: 0;
        z-index: 0;
    }
}


/*All other rows - these play continuously*/

@-webkit-keyframes rest {
    0.01% {
        opacity: 0;
        z-index: 0;
    }
    0.011% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        opacity: 1;
        z-index: 1;
    }
    50% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 1;
    }
}

@keyframes rest {
    0.01% {
        opacity: 0;
        z-index: 0;
    }
    0.011% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        opacity: 1;
        z-index: 1;
    }
    50% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 1;
    }
}


/*Pause all animation on hover*/

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


/*-----------------------------------------------*/
/*---End Scrolling Image Carousel by Divi Soup---*/
/*-----------------------------------------------*/

 

25 Images CSS
/*-----------------------------------------------*/
/*-----Scrolling Image Carousel by Divi Soup-----*/
/*-----------------------------------------------*/


/***25 Images***/


/*Stops the browser creating a horizontal scrollbar*/

.ds-carousel-section {
    overflow: hidden;
}


/*Sets the width of the image modules and floats them so they are next to each other*/

.ds-carousel-logo {
    width: 20%;
    float: left;
}


/*Sets the position and visibility of the rows*/

.ds-image-carousel {
    float: left;
    position: absolute;
    padding: 0;
    opacity: 0;
    z-index: 0;
}


/*Position, visibility and animation settings for the first row*/

.ds-image-carousel-first {
    position: relative;
    z-index: 1;
    -webkit-animation: first 15s 1 linear forwards;
    animation: first 15s 1 linear forwards;
}


/*Animation settings for the rest of the rows*/

.ds-image-carousel-second,
.ds-image-carousel-third,
.ds-image-carousel-fourth,
.ds-image-carousel-fifth,
.ds-image-carousel-sixth {
    -webkit-animation: rest 75s infinite linear;
    animation: rest 75s infinite linear;
}


/*Animation delay for the third row*/

.ds-image-carousel-third {
    -webkit-animation-delay: 15s;
    animation-delay: 15;
}


/*Animation delay for the fourth row*/

.ds-image-carousel-fourth {
    -webkit-animation-delay: 30s;
    animation-delay: 30;
}


/*Animation delay for the fifth row*/

.ds-image-carousel-fifth {
    -webkit-animation-delay: 45s;
    animation-delay: 45;
}


/*Animation delay for the sixth row*/

.ds-image-carousel-sixth {
    -webkit-animation-delay: 60s;
    animation-delay: 60;
}


/*Animation for the continuous scrolling effect*/


/*First row - this only plays once*/

@-webkit-keyframes first {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
        z-index: 1;
    }
    99.99% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 1;
        z-index: 1;
    }
    100% {
        opacity: 0;
        z-index: 0;
    }
}

@keyframes first {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
        z-index: 1;
    }
    99.99% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 1;
        z-index: 1;
    }
    100% {
        opacity: 0;
        z-index: 0;
    }
}


/*All other rows - these play continuously*/

@-webkit-keyframes rest {
    0.01% {
        opacity: 0;
        z-index: 0;
    }
    0.011% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        opacity: 1;
        z-index: 1;
    }
    40% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 1;
    }
}

@keyframes rest {
    0.01% {
        opacity: 0;
        z-index: 0;
    }
    0.011% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        opacity: 1;
        z-index: 1;
    }
    40% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 1;
    }
}


/*Pause all animation on hover*/

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


/*-----------------------------------------------*/
/*---End Scrolling Image Carousel by Divi Soup---*/
/*-----------------------------------------------*/

 

 

A couple of points to note.

For each extra row of images we add, we need to edit the row classes so each row has a unique number, for instance:

20 images (5 rows total)

Row 1 = ds-image-carousel ds-image-carousel-first
Row 2 = ds-image-carousel ds-image-carousel-second
Row 3 = ds-image-carousel ds-image-carousel-third
Row 4 = ds-image-carousel ds-image-carousel-fourth
Row 5 = ds-image-carousel ds-image-carousel-fifth (the images in this row are exactly the same as row 1, only the class if different)

25 images (6 rows total)

Row 1 = ds-image-carousel ds-image-carousel-first
Row 2 = ds-image-carousel ds-image-carousel-second
Row 3 = ds-image-carousel ds-image-carousel-third
Row 4 = ds-image-carousel ds-image-carousel-fourth
Row 5 = ds-image-carousel ds-image-carousel-fifth
Row 6 = ds-image-carousel ds-image-carousel-sixth (the images in this row are exactly the same as row 1, only the class if different)

Just increment the numbered CSS class for each row you add.

Then we need to include the additional numbered classes separated by commas and increment the Total Animation Duration by 15 seconds per additional row in the following section of CSS which is provided in the complete code:

/*Animation settings for the rest of the rows*/

/*Example for 20 images*/

.ds-image-carousel-second,
.ds-image-carousel-third,
.ds-image-carousel-fourth,
.ds-image-carousel-fifth {
    -webkit-animation: rest 60s infinite linear;
    animation: rest 60s infinite linear;
}

/*Example for 25 images*/

.ds-image-carousel-second,
.ds-image-carousel-third,
.ds-image-carousel-fourth,
.ds-image-carousel-fifth,
.ds-image-carousel-sixth {
    -webkit-animation: rest 75s infinite linear;
    animation: rest 75s infinite linear;
}

 

We also need to set animation delays for each row, incrementing each by 15 seconds from the third row onward: 

/*Example for 25 images*/

/*Animation delay for the third row*/

.ds-image-carousel-third {
    -webkit-animation-delay: 15s;
    animation-delay: 15;
}


/*Animation delay for the fourth row*/

.ds-image-carousel-fourth {
    -webkit-animation-delay: 30s;
    animation-delay: 30;
}


/*Animation delay for the fifth row*/

.ds-image-carousel-fifth {
    -webkit-animation-delay: 45s;
    animation-delay: 45;
}


/*Animation delay for the sixth row*/

.ds-image-carousel-sixth {
    -webkit-animation-delay: 60s;
    animation-delay: 60;
}

 

Whilst I have done my best to explain how to edit this effect in the simplest terms I can, I know it can be a little daunting for beginners to edit more advanced CSS like this. So if you are feeling a bit overwhelmed then just click the button below to download a JSON layout containing carousel sections and the corresponding CSS for 10, 15, 20 and 25 images.

All you need to do is choose the carousel section and corresponding CSS you want, delete the rest and then swap out the image placeholders for your own, ensuring your first and last rows always contain the same 5 images in the same order.

If you want more space between the images on smaller screens, you can use the left and right padding fields for tablets and mobiles in the Design tab of the Image Modules. I would suggest setting both left and right to something like 2% – 5% (not px) which will give a nice even space across devices.

Be sure to import the JSON file into a new PAGE and NOT the library, then follow the instructions on the modules.

And that’s it!

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

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educator as well as a mother of two beautiful girls and two cheeky Black Labradors called Harley & Chaz. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.

Related Posts