Like our free content? Then you'll love our exclusive Club!
Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!
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 
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!
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.
Next, in the Design tab give the section a top and bottom padding of 0. Then save & exit.
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
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.
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.
If you want your image to link to a page then enter the URL in the Link URL field,
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.
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.
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.
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.
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..
And do the same in the third row, changing ds-image-carousel-first to ds-image-carousel-third.
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?
@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. 
Michelle X
The carousel is working fine in Firefox and Chrome but in Safari the images show in a column on the page. I disabled minifying css in Divi.
Using php 7.0.29, wordpress 4.9.5 and the latest Divi.
I’m not seeing that on my end – looks OK in Safari. Can you clear your computer/browser cache and check it again?
Hi Michelle,
Love the tutorial as it’s exactly what I need, however I have the stacking issue where the top group of five displays once then disappears, while rows two and three keep displaying but on different levels. I’ve checked it on Safari and Firefox and it’s the same on both.
If you could offer any advice I’d really appreciate it.
Be sure you are not minifying CSS and check the settings in any caching plugin you may be using.
Thanks for your response Shay. I’m unfamiliar with minifying CSS so if you could advise me what to check I’d appreciate it. I’m not currently using a caching plugin so I’m guessing it can’t be that.
These options can be found in Divi > Theme Options > General at the bottom AND in Divi > Theme Options > Builder
http://www.lorrainecalland.com/leadership-coaching
Sadly no change. Played around with settings in both Divi > Theme Options > General and in Divi > Theme Options > Builder.
As you’ll see from the link I still have three rows with the top row scrolling once then the middle and bottom rows continuing to scroll.
Thanks for checking for me, we’ll take a look at the code and post an update here if we find something
I have the same problem and have just removed all plugins bar the divi one.
Can you a share a link to the page it is happening on?
Hi Michelle,
I am using the carousel on my website https://www.florida-hie.net and it works perfectly on Chrome & FireFox. My problems comes in when i switch to Edge or Safari, the carousel speeds up causing my logos/rows to overlap. Would you know why this happening? I followed your steps above. And also troubleshooted your test carousel on edge and the same problem is occurring.
Please get back to me soon!!!
THANKS!
-Matt
Browser updates have caused some issues so I have actually completely rewritten this tutorial now so that it will also work with other modules and is even easier to edit based on your needs. Keep an eye out for that. But do be aware I do not support IE anymore at all.
Hi, I’m using this carousel and I find it really pretty, but it doesn’t work on Safari and Internet explorer. How can I solve this issue?
Internet Explorer is long gone, so can’t help there, but it works OK for me on Safari. Can you show an example of it not working?
Sorry I meat Microsof Edge not Internet Explorer. When I open the page with Safari and internet explorer, there is a problem with the speed or the delay of the slider and the images overlapse and move at two different speeds. this is the site where I used the slider: http://dev1.novamachsrl.it/prodotti/
Can you tell me…
Does the demo site (https://divisoup.com/image-carousel-demo) show the error for you?
Which version of Divi you are using?
What PHP version you have?
Have you tried deactivating plugins to look for a conflict?
Hi Shay,
also the demo site doesn’t work.
In Safari 11.1 the carousel start normally but when I hover and image with the mouse other images appear behind. When the first loop of the carousel end, appears a long blank space (the images seem hidden) and then the carousel start again.
In the latest version of Safari the carousel start normally but the problem of the blank space described above persists.
In microsoft Edge the carousel images appear overlapped and move at two different speeds.
Thanks – can you tell me how many images you’re using. If you can, recheck the demo and let me know if that is working now for you.
Could I use this to create a testimonial carousel?
I would not recommend that – there some tutorials out there as well as some plugins that will help create that.
Very Thanks
Hi, worked perfect. In all browser. Today I had an upgrade of safari to 11.1 (12605.1.33.1.3) and now the carousel dont work like it should anymore. Still works in firefox and chrome, no problem there. Anyone suggestions? Look at http://highres.nl/portfolio/
Sorry, I don’t see a carousel on that page
Thank you SO MUCH!!!!! It will help me a lot!!!!
perfect!!! works beautifully thanks so much for enhancing my website so much!! looking forward to some more amazing tutorials!!
Thanks for your tutorial, I have done with it but I have little problem here. There is little gap when the final image has reached, i’ve implemented 5 images in 3 rows and the top padding, bottom padding already set to 0px. You can see the picture in the link below
?dl=0
How to make image continuously slide without gap?
Thank you for the wonderful tutorial. The scrolling carousel works great in Chrome, Firefox and Safari, but my client is using Internet explorer 11.125.16299.0.
Do you have a fix or should I recommend he upgrade to Microsoft Edge?
https://reliancegrouptexas.com/
IE is no longer supported by Microsoft and we do not support it either, I would advise your client to upgrade
Hey, i followed the instruction, which were amazing, but i am having issues on the mobile and tablet version. I have 14 images, so i expect the space for the 15th element. Nonetheless, when i view the carousel on the mobile platform, the images in the first row overlap each other but the rest of the images scroll as expected. the only issues is the initial row when loading the page
Impossible to say without a link to the issue Keith
Hi,
which code do I have to add exactly to reproduce exactly your “SCROLLING IMAGE CAROUSEL” demo?
many thanks
Vincenzo
The code for 10 images as you see in the first toggle
Awesome slideshow! I followed the guide and got it working for 10 images. However, I’d like to use it for 40 images, (45 I guess but these last 5 are just the first 5). Tried doing the CSS math and didn’t quite do it right. I’m leaving the time default to 15. Can you help!
There really isn’t anything more we can say other than what is in the instructions, we have tried to explain it in the simplest terms possible. Try adjust 5 images at a time. Start with the code for 25 and once that is working just add 5 at a time, each time cheking everything is working
Hi Michelle,
As a newcomer to Divi, I very much appreciate your tutorial. However I have been trying to add the scrolling carousel to a website and am having problems aligning the images/row horizontally. (See
I can see how I might be able to adjust this on the demo code you insert, but how can I access that code. It appears I can only see a cut down version if I cut and paste from your tutorial? Am I missing something obvious?
The code is listed out in the recipe. If you choose to download the json file, the code will be in a section on the page you import it into. You can edit it there.
Thank you for this tutorial! I implemented it for 15 images. On the website, after the last image in the scroll (image 15), there is this huge white gap for about 10 seconds before the 1st row of images begins rotating through again. I don’t see this in your demo. Can you tell me where I might have gone wrong, or what might cause that? Thanks so much!
Are you using the same size for all images?
I have the same issue – all the images are the same size
Hi Michelle,
Just got done with setting the scrolling logo on my website.
Looked like a tedious task, thank you for cooking it up for us. Not to forget it’s a really well-articulated guide for beginners like me.
PS: It’ll be great if could give me some feedback on http://www.umacosmoplastics.in (The place where I’ve implemented the same).
Thanks again,
Priyaanshu Jajodia
Hi Michelle, thank you so much for the logo carousel , it is great.
However I am facing some issue on mobile , some of the images disappear suddenly and they overlap on each other. Please advise how to fix this?
Be sure you are using the correct number of images and sizing
Hi, my project requires slightly different image sizes which are wide. how can I get around this issues without changing the images sizes.
Image Size: 244 x 122
Have you tried it with your own images sizes adn changed the values in the CSS?
Hi,
I love what you have done here with this code!
I am interested in using this code, but rather than presenting 5 images at a time, is it possible to modify the code so it can present 6 images instead? The image sizes would have to shrink as well, I believe.
Yes, but you will need to adjust the values accordingly
H
I want to use only 4 images. Could you please advice me to adjust the code? I have tried but couldn’t figure out. Thank you
You will need to adjust the widths in the CSS
Hi Michelle,
Thank you for posting this – a missing feature in Divi in my opinion…
I’ve applied the code per your blog on Elegant Themes, but to projects (including an adjustment one of the CSS classes). It looks the goods, but they don’t repeat in the row, it just scrolls right to empty space. Am I doing anything wrong to make it not repeat / be continuous, or is that not the way the code is structured?
That’s the only things holding me back at the moment. Any help would be greatly appreciated.
Thank you in advance.
David
Can you share a link? You’re using square images?
Hi Shay,
I realised I didn’t enter the link, but couldn’t edit the comment to add it. The link is http://testing123.com.au/cca/home-new/ and the images are rectangular (possibly due to the width of each one?).
Thank you
From a quick glance it doesn’t look like the images (projects) are declared individually as they are in the recipe for images. However, I was unable to see any blank space at the end. Instead it stops without looping.
All the projects are individual project modules (sub-categories to pull in as you can’t offset). I think I may have fixed the blank space, but would like it to loop like the demo. Any ideas? Thank you
Appreciate its been a while since you asked this but I see you are using another solution now
Hello,
It’s working perfectly!
How can I create a space between each image?
Sorry, but I don’t speak English very good
You can adjust the left and right padding of the images
Is it possible to do this not in 5 image intervals? And can you also do more than 25?
Yes – you’ll just need to adjust the values accordingly
Hi Michelle,
Thanks for writing such a wonderful article. I think the code is written for the Divi theme but my issue is that I am using the Divi Page Builder Plugin and each row of images are coming down below another. You can see exactly what is happening at the below url
http://www.dreamlandacademy.in/demo/
Request you to kindly suggest wayout to resolve this issue. Thanks in advance ..
Regards,
Amar
Likely something in your theme causing this. This recipe is for the Divi theme only.
Hi, i have problem in to my site http://www.chapecosi.ind.br, it arrives at the end and it takes to return to the beginning … How can I reduce this time?
Timing looks the same to me. I don’t see any delay.
Hi there, my top row works, but the bottom two don’t follow. I believe they are there, just in the rows underneath which aren’t showing. I copied and pasted the css for 10 images. is it because they are not all the same size? excuse the mess of the page, i’m just trying to work this pat out.
Yes, the images should all be the same size. The recipe uses 200px X 200px.
Hello Michelle,
Thank you for this wonderful tutorial…
Can we open pop up window on scrolling logo?
Click on scrolling logo open popup window and that popup window show client testimonials. It’s possible?
Thank you,
Swapnil Doshi
The image module allows for opening the image in a popup, but to have client testimonials displayed you will want to use a plugin.
Thank you Michelle…
Could you tell me which plugin I have to use?
Thank you,
Any that can target a single testimonial and can be placed in a modal or popup.
Hi Michelle,
When viewing the smooth slider I am experiencing juddering randomly on most browsers? Any ideas why this is?
Can you share a link to the site that is happening on?
Hi, Michelle
Thank you for this, amazing post.
May i ask how i should change the css if my logos are 133x80px?
I am looking at the code and don’t know what to alter.
Thank you.
Hello Michelle
Great tutorial really easy and helpfull, but i have problems when i start to load page in ie. In ie carousel place my third row on top of second so my pic is covered with another pics. Can u please help me i dont know what is wrong.With chrome and mozila it Works prefect.
On which browser and can you post a link please
I’m not sure u got my last reply so im texting u again. So problem is with internet explorer and microsoft edge and i have no idea why. It works perfect with chrome and firefox. The page is .
Internet Explorer is a bit outdated for us to even test on, but works OK for us on Edge. Please update Divi and WordPress then try again.
Hi!
Thanks for the article, working perfectly!
Can you tell me what I need to change, if I want this working with a non fullwidth row?
Thank you!
You shouldn’t need to change anything apart from making the row not fullwidth Gabor
Thanks for this awesome recipe ! it work fine
Well i think i’m achieve it and it´s look great, Thanks, thanks Michelle.
You can see it at the final of this webpage: http://www.ivermen.com
The logos are not perfect in dimensions but i like it!!
Looks great Pedro
Hello Michelle,
Hope you are doing great.
I’m . facing issues with MAC safari browser just like Alexandra commented.
IF you would want we can work together on this to get it fixed.. I see some additional class affecting in the safari mac inspect thus not getting to work on the safari browser.
I had to remove the class : et_pb_column et_pb_column_4_4 et_pb_column_5 to make it work/behave properly on safari. (STILL UNRESOLVED AS I AM NOT ABLE TO REMVOE THE CLASS ONLY FOR SAFARI BROWSER)
Let me know if you have any additional comments on the same.
Thank you
I can’t currently test on Mac I am afraid but I plan to rectify this soon
this is a great article! can you do different sizes images or do the logos HAVE to be 200 x200? What about logos that are horizontal?
Yes you can change the image sizes but you will need to modify the CSS accordingly
Hi,
What part do i have do modify? I have images 133×80 in they start do overlap at one point.,,
You need to compute the correct values using the calculation described in the post
Hi
Love the tutorial… Where in the css is the size of the image set? Can you please let me know where to go to make it a horizontal logo?
Thanks.
You need to define a height value for the logo in the CSS
Hi Michelle great tutorial
Where in the CSS do we change the logo size into a horizontal size?
You’re not changing, you would need to add that since the code is written completely for square images. You’d need to add in height value for logo and the image wraps.
Very glad to have found this, but for some reason the second row of images rides higher on the page than the first and third rows. I must have done something wrong … but what? All images are 200x200px, all rows were copied from the first one, then Advanced code changes as you indicated. I’ve included a link below to the site (a work in progress). Appreciate any advice!
I don’t see a link Peg?
Hi Michelle, really helpful post and works like a dream! I was wondering if there was anyway it would work for a blurb module instead of an image module? I need to have a title and a little bit of text underneath each image.
Yes the same principles apply, you could use any module but would need to amend the CSS using the alternative classes
having some trouble with the link when i import it bounces and says “This file should not be imported in this context.”
That’s because you are importing into the library, please import into a new page
hi, very nice, scrolling image carousel! but I have some issues. Starts fine but for the third row, breaks. and it does not stop moving on roll over
Sounds like you may have some issues with z-index. Can’t help more without a link
Hello! very good tutorial but I need the code for 30 logos could you help me? how exactly would it be? I’ve tried it in several ways but it has not got it working. thanks!
I can’t explain it any more than I have in the post, it does contain instructions for making the calculation for different image numbers
Stunning scrolling image carousel! Or better OUTSTANDING! Very detailed tutorial, perfect step by step, tryed first build by my own, worked very fine, but when i change some page delet by accident the section, so i download the json layout, and bang again! Thanks for sharing! And i´m just a begginer of css and divi universe. Cheers!
Thanks great, thank you!
Hi Michelle, Great tutorial but I am having an issue with a fixed row of images in the carousel. I’ve walked through the steps many times now but can’t figure out what is causing the problem. Can you let me know how to fix the issue?
Not without a link to take a look
Hi Michelle. Thank you for sharing this. I am building a website for a friends movie theatre and this is perfect for the coming soon posters! My question is, has anyone had problems in Microsoft Edge when you hover over the images to stop them? It works great in Chrome and Firefox but when I do it in Edge, it started to duplicate posters and also started to stack them on top of each other. Right now, I have taken that CSS code out so it does stop. It is not really a big deal for this site but I… Read more »
I see that issue to Kevin, I will update the tutorial code as soon as I can
Thanks Michelle. I just want to make sure it wasn’t user error on my part. I will wait for the update.
Definitely looking forward to this as well. Trying to design anything to work in edge gives me cold sweats in the night.
I’m having some issues with the carousel:
1 – I have the scroll fine but some images overlap one another. Not too many but a couple.
2 – There is a big gap in-between Rows 2 & 3. I didn’t change any settings that would cause this odd break.
3 – When you hover over the carousel, portions of it disappears. Sometimes, the whole thing vanishes all together.
Unfortunately, I’m not allowed to share a link to our dev site until it launches in November. Is there a way I could share the link privately?
Thank you!
Help? Please?
You can use the contact form on this site and I will do my best to help
Thank you. Will do!
HI Michelle. This is great stuff. Having an issue though. Before adding the CSS the images are stacked on each other (which you said would happen without the CSS). After adding the CSS the entire section disappears. Now there is something happening for with the carousel because a status bar or page left to right scroll bar shows up in a cycle at the bottom of the screen. http://smaa.lmtzcreativeweb.com/ is the site link. Any guidance you can give me is greatly appreciated. THank you. I am trying 15 images and used this code: copied from your post /*———————————————–*/ /*—–Scrolling Image… Read more »
Sorry but I don’t see anything on that page I can check
Thank you so much for this tutorial, its excellent ¡, i had used it in a couple of webs, very helpfull
That’s great Millan
I uploaded the .json to a new page – gives me a 502 error after completing upload. Any thoughts on why that would happen? Fresh divi install very few plugins so far.
Try on a different install and see if you have the same error. Also you can check this article https://www.theguardian.com/technology/askjack/2013/aug/01/502-bad-gateway-error
Hi Michelle,
Following your You Tube video it seems the CSS is different on the video than it is on this page? After setting everything up, with the CSS on this page I get two rows, the top row scrolls out of sight and the bottom row is stationary?
Hey Malcolm. The method has actually been updated since that video was recorded. Would suggest just following the process in the blog post which will worked with the updated CSS
Thanks! is the JSON download necessary to make it work or is that an option?
That’s just the easy option, if you don’t want to follow the tutorial, download the json and import into a new page then edit as you need.
Thank you so much.I like your suggestions
Hi Michelle,
thank you very much for this receipe (and all other wonderful ones !).
The carousel works perfectly on Chrome and Firefox, but behave weirdly on Safari. Any idea on why and how to solve this ? Thank you so much and have a very nice week end !
I have just been notified about this and I will be looking into it, however I don’t use mac so it may take a little while
Wow! What a nice way of presentation! Your voice is also very clear and the speed is perfect! And then the cherry on the pie.. the incredible good looking explanation on your site, complete with css and all. Two thumbs up for you!
Thanks so much Ron
Hi Michelle, Thanks for this awesome recipe! I am trying to create this effect with 10 images. My carousel is at the bottom of this page: https://sprtraffic.wpengine.com/services You’ll notice the images stop and don’t continue to the next row. In addition, there is a large amount of white space around them. I’m not sure if the latest version of Divi is causing this problem or not as they added a new animation feature, so when you say to turn the animation off for the image module in the ‘Advanced’ tab, it is actually at the bottom of the ‘Design’ tab… Read more »
Hi Lisa
Looks like you used separate sections. All the image modules should be in the same section, just separate rows
Thanks! That did it! Is there also a way to get rid of the spaces between the images so they are touching?
Yes, you can add this CSS
.ds-carousel-logo img {
width: 100%;
}
Although as the raw image sizes are 200 x200px this will probably make them blurry so you will want to replace them with larger images. 300 x 300px should do it.
Hi Michelle,
thanks for the wonderful recipe.
Is it possible to show seven rows?
Because the scrolling images (third row with seventh row) overlapping themselfes.
I would be happy if you can answer my question.
Hi Mina, yes its possible, you need to follow the calculations provided and ensure you modify the animation delays correctly so that rows are now overlapping
Hey Michelle.
I followed all your steps and it’s been super helpful. Thank you.
Slight issue with the spacce between the rows when they slide through. For some reason there a lot of space until the next rows shows up.
My website is in a coming soon mode so posting the link probably wouldnt help much. Any ideas why that is?
Also which numbers do I have to change if I equally wanna slow the sliding down?
Thank you so much !!
Difficult to tell without a link by likely you have not change the animation correctly to have one row come in after the other.
For the speed, you need to edit the animation-delay property
Hi Michelle,
Thanks for the tutorial, I followed the article and copy pasted the code, but my images show up under each other. What do you think I might be forgetting? I cant figure it out.
It is around the bottom of this page:
I am not sure which version of this tutorial you are using as I updated it but if you are using the latest version it looks like you missed out the position: absolute; from the css
Thank you Michelle. Your answer pointed me in the right direction. The issue was that I only had the ds-image-carousel-first class (and the other numbered ones) added to the row and didnt add ds-image-carousel class. So now I added that one also to have “ds-image-carousel ds-image-carousel-first” and “ds-image-carousel ds-image-carousel-second” etc. on the advanced tab as extra class, and now everything works just fine.
That’s great Peter
Hi Peter, download JSON layout (link above) and follow up instruction given by Michelle. It worked for me.
Hi there. At the very beginning, you instruct that one create a section and edit the section details. Then you instruct to edit the row settings without saying what exactly needs to go inside that row. I may have missed something here, but you can only edit settings once something is inside that row.
That’s not correct, you can edit the row settings without any columns set or modules in the row. Just click the hamburger icon in the green box
Hi Michelle,
Thanks a ton for all the beautiful resources you have been sharing all this while. This recipe works wonders.
Just a quick help – The mobile view, images are getting too small ( http://www.turmericmilks.com )
?
Any fix for the same
You would need to write a media query to display a different number of images per row on mobile and then create a new section just for mobile
This is a great tutorial and it works perfectly. I have a questions though – Is there a way to make this image carousel pause for say 5-seconds on each set of 5, before continuing the slow scroll? I’m trying to make an event sponsor carousel, and I am currently only using 10-images. I played with the settings a bit but couldn’t figure out how to make it do what I am looking for. Any thoughts? Thanks again!
Yes its possible, you would need to adjust the keyframes to do this as you cannot pause in between animations
Hi Michelle! I love your work! Thanks a lot for your great technique and recipe. I cooked my soup (my coffee): https://gombasiker.hu
Thanks very much
Hi Michelle,
Great tutorial! I followed along all the steps. My carousel is showing 3 lines of logos. So, I tried to import the json file above.
Divi is giving me an error when I try to import the json file.
*This file should not be imported in this context.*
Has anyone else had issues with it?
Thank you!
(I posted again because I’m not sure if my website link attached to the last message)
That means you are importing in the wrong place. If it says that when importing into the library, then import into a page and vice versa
Hello Michelle, thank you very much for this tutorial. I find it very usefull. However I have a problem, I copy paste your CSS and using 10 logos. They are not scrolling in one row. 1st row is on the top, 2nd row bellow first row, 3rd row bellow second row. Can you help me with this? Thank you.
If you have used the latest code update check you have the position set to absolute for the rows as this is usually the reason
Thank you Michelle, the problem is fixed
Thanks for the recipe. I am using the images of the size 250×250. I would be glad if you would be able to take a look at the link below and help me out.
http://technoid.co.in/inquest/
Thanks in advance.
Help out with what exactly? what is the problem?
Images in each row were stacked up. It was a css issue and I was able to solve the problem. Thanks anyways.
Hi Michelle, My images are of size 250×250. They are stacked up like in the http://technoid.co.in/inquest. Can you help?
Michelle, I am SO excited about this carousel. I eventually want to add a very short testimonial in each image, but because I’m sort of a newbie, I decided to use alternating B&W 1 through 10 numbers on alternating B&W backgrounds as test images first to see if I could make this work. It scrolls and pauses beautifully (I LOVE IT!), but I can see that my 200×200 images now vary in width (odd numbers are rectangles and even numbers are squares), plus Image #1 overlaps Image #10’s right edge when it repeats itself, and Image #5 overlaps Image #1… Read more »
What you are explaining should not happen, but I cannot say why it might be without a link to the issue.
an you should be able to use any image size you like as the size is only restricted by the width of the modules
great tutorial! I have an issue when viewing on a large imac screen that the 3rd row appears to over lap the last image of the 1st row? It doesn’t happen on smaller screens. Any idea? Site is : http://www.wpeagle.com/sf
Looks like you found an alternative solution Alex?
Hi,
Thanks for this code. (Y) Just what i am looking for.
I have a small problem. Row behind my images are black, and i have used your json file, and images. Can you look what the problem is here is the link Click here for the website
Looks like you fixed this
Hello Michelle thank you so much for this tutorial.
Most welcome Roxana
hi Michelle I tried to change the slide to 25 images I followed the guide but there is a problem in the show
why?
Have you downloaded the template and swapped out for your own images?
Michelle I worked according to the manual I duplicated the tables I added the code but the show is not working properlyion
I cannot see what the problem might be without a link Izzik
Hi Michelle, I followed your new recipe and it works great! Thank you so much. I have 30 images, so I just added a 7th row and adjusted the animation times, which worked perfectly. However, once the carousel makes 1 full rotation, the second row suddenly does not show up on any following rotations. It goes: 1st, 3rd-7th indefinitely. Can you please let me know what I’m doing wrong? I copied your CSS for 25 images and only added a 7th row – I didn’t make any changes to the 2nd. /*———————————————–*/ /*—–Scrolling Image Carousel by Divi Soup—–*/ /*———————————————–*/ /***30… Read more »
Did you get this resolved?
If you haven’t got it resolved yet I see what you missed. Check the section of the recipe that explains the math for the keyframes and change yours accordingly.
Hi Michelle. Thanks for the tutorial. I have one question. Here you can see the site with carousel: http://www.ideally.pl/idea/?page_id=40. I know its not using images but blurb modules
When viewport is greater or equals 1700 px (width) is all good but then it’s crashing. Is there an option to stop it? For example, instead of 5 columns, show only 2 but still in 1 row. Changing .ds-carousel-logo – width: 20% won’t help as you probably know.
I’m attaching image in case you will not understand
http://imgur.com/1wdLvnZ – that’s what i want to achieve on mobile for example.
It looks to be working fine for me, assuming you got this fixed?
Hi Michelle, I am having a really hard time with this carousel! Hoping you can help. I have 30 images (7 rows, with the 7th being a repeat of the 1st). Each row has been renamed correctly. I took your CSS for 25 images and tweaked it to add a 7th row (including increasing the animation delay), but now the first row appears in the carousel, and the other 6 rows just show up static underneath….Can you take a look and see what I’m doing wrong?? The url is: http://devsite.jsnell.com/products/paper-handling-finishing-systems/paper-folders/ Here is the CSS: /*———————————————–*/ /*—–Scrolling Image Carousel by Divi… Read more »
Look like you got this fixed?
Many thanks Michelle for the hover pause code.
Please note that I’m stuck in something, may be because I’m not good in math
I actually have 8 images not 15,20 or 25.
How will be the code or the steps that I should follow then?
Thanks in advance to reply to my comment urgently.
Best regards,
Amir Mostafa.
You would use the code for the 10 images them remove one of the image modules in each row and change the width from 20% to 25%
Pleased to see a great tutorial rather than an author selling it as a plugin! Nice work!
I tried the 2% spacing on images for mobile, but you mentioned padding. On the image settings I’ve only got margin option. So I put the 2% in right and left margins for each image but that caused 5th image on each row to not fit, so it overflows underneath.
I tried padding in row settings but that didn’t seem to work.
Could you please help with how 2% spacing on phone can be achieved?
Apologies Chris, I was sure there was a padding setting in there but you are correct, there isn’t! So you can do this with CSS:
Underneath this CSS:
.ds-carousel-logo {
width: 20%;
float: left;
}
Add this and adjust the breakpoint as needed:
@media all and (max-width: 479px) {
.ds-carousel-logo {
padding: 0 2%;
}
}
Haha thanks Paulo
Wow! This time it was all right, Michele. I just needed to insert the images and css code!
Wonderful!!
Thank you.
Hi Michelle, thanks for the update! I’ve used this recipe on a few websites and the clients love it! I’m currently busy with a project that requires exactly 39 images in a scrolling image carousel. How do I do that? Thanks in advance.
Short answer is you can’t! It requires rows of an equal number of images to function properly or you will have a gap and the only number that goes into 39 is 13, so you would need 3 rows with 13 images which will make them far too small.
I would suggest adding another image, either a duplicate of another image or something else.
Michelle
Could you please explain what a JSON file is and how to import it to the page. I do hope I’m not the only one not to understand it.
This explains it well Brian https://aspengrovestudios.com/a-complete-guide-to-importexport-divi-layout-library/
Awesome! Thanks a lot
Hey Michelle, First you did a great job and also all of your recipes are awesome. About a month ago i visited this page and saw another type of image carousel on the demo page which is manually sliding. Can you please tell what are the changes i have to made in the css to stop the automatic sliding and make it manually.
Thank You.
Sorry Mukesh I don’t have any such effect that I can think of. Perhaps this is what you are referring to? https://divisoup.com/accordion-image-slider-menu/
It’s fine Michelle. Your pinterest style blog layout and scrolling image carousel are both awesome. But what about you just modify the image carousel to auto scrolling and mix your two design and make the complete pinterest layout.
image link – https://ibb.co/fRovLQ
That sort of functionality is not provided for the blog module (rather filterable portfolio) and would require some substantial JS which is not something I am very experience in I am afraid
Hi Michelle, Thanks Just what I need, but right now I have 10 logos. How do I change the css file to display 20 logos?
There is no problem in adding another 2 sets of 5 images in divi
ds-image-carousel-Fourth
ds-image-carousel-Fifth
I have just updated the post, please re-read and is needed download the free layout
First of all, thank you very much for an invested guide, exactly what I was looking for
Can I add that the images appear black and white and standing will become colored?
Yes, you can use filters to switch effects on hover, check this out https://divisoup.com/how-to-use-css3-filters-to-create-captivating-images/
Great technique! Thanks a lot for that, spared me lots of time.
One comment: I had images exciding 200px height (248px to be exact). And there was weird ‘step’ going on between .ds-image-carousel-first and .ds-image-carousel-second.
Fix: add overflow: hidden to .ds-image-carousel-first. Works like a charm
Woo hoo – I tried it and I love it! (Here’s my test using your logos) http://britishspeedgolf.co.uk/test-carousel-page/
Hi Michelle, Thanks for posting this great tutorial. I followed your tutorial. It looks great. Just a quick question. Is it possible to stop the scrolling image on hover? Once again thank you for posting.
Yes, add this:
.ds-carousel-section:hover .ds-image-carousel-first,
.ds-carousel-section:hover .ds-image-carousel-second,
.ds-carousel-section:hover .ds-image-carousel-third {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
Hi Michelle, thank you very much for this code, even that my images are not 200px x 200px, the code works terrific in my site as it is (my images are 300px x 170px), just in the mobile is where everything change. I was searching along the kind answers you have been given in this post but I did not find the relative one. Is there any direction you may recommend me to fix the mobile issue? This is my page: http://www.eplataformas.com
Thank you very much again.
I know I’m a bit late to the party Sergio but I don’t see it on your page
Hey Michelle. Thanks for the tutorial. I tried on my page however no luck. I actually have 5 instead of 3. ( copied the 2 for 3 &4 and renamed 5th to allow me to get more in there) Hopefully that isnt the issue. I however can only see a select 3 images in there. .. any idea why this is ?
Jessica have you also duplicate and renamed the animation and adjusted the timing?
You really rock Michelle!!! Thanks for a superb tutorial :). Very well written and useful.
https://www.jakuseguros.com/
I’ve tried on my page and it’s working!!! I saved it to divi library so I can reuse it
Thanks a lot! I’ll try start increasing the number of images to 25, hope it goes well
Thanks Diego, looks great
Michelle, I only have 2 rows of 3 images, seems to work except the end of the animation, do I need to have 3 rows for this to work correctly? Also I have a background its on so I had to remove the background:#fff. and that could be why its breaking?
Yes you need at least 3 rows as the first and last are the same images, so if you only have two there is nothing to scroll through as the first row stops after the first iteration.
Hi! I love your work! I wonder why Divi didn’t do a plugin for this. I followed your instructions and it works! However, I need to have 25 images so I tweaked a little bit your codes. (each row section has 5 images) .ds-carousel-section { overflow: hidden; max-height: 400px; } @media only screen and (max-width: 567px) { .ds-carousel-section { max-height: 180px; padding: 0; } } .ds-carousel-logo { width: 20%; float: left; } .ds-image-carousel-first { width: 100% !important; max-height: 200px; height: 200px; background: #fff; animation: 15s first 1 linear; animation-fill-mode: forwards; } .ds-image-carousel-second { z-index: 2; height: 200px; background: #fff; width:… Read more »
You need to adjust the animation delays as at the moment you have all the ones you have added coming in at the same time
So it should be, 15, 30, 45, 60, 75 as animation delay?
I have just updated the post, please re-read and if needed download the free layout
I think I wasn’t able to reply.
How can I do that? What do I need to adjust? Just the animation-delay?
Michelle, great code. I created it and then made some changes and now I need help please My site is being built on a temp url found here: http://fcc.767.myftpupload.com/ and scroll down towards bottom of Home page. I reduced the size of my logo’s to about 100×100, and reduced the height of the section to 120. I also slowed it down a little. I pasted the updated code below. As you can see the scrolling doesn’t work as it should, how do I fix that? Secondly, how can I make it so the logo’s are centered up and down in… Read more »
You have changed the container width to 10% so the total of each row is only taking up half the screen, change that back to 20%
Thank you! Is there a way to vertically center the logos in the space it is in? They look to all be justified to the top.
Its best to do this when formatting the images themselves, so make the canvases all one size and center the logo in the image itself
Hi Michelle,
Again, thanks so much for posting. Once again Divi did an update and after I applied the update my carousel was adversely affected causing a huge gap between the pics. The gap is about the space of 5 pics. I tried adjusting parts of the code I thought would help with no positive results.
Will you be updating the code each time Divi does their update?
I re-pasted the code after the update also and got the same results.
Hey Barry. No sorry its not viable for me to update each tutorial every time Divi updates, I wouldn’t have time to do anything else
I have however created a new carousel tutorial that should prove easier for users to modify so I hope to publish that soon. In the meantime though do you have a link to your page please and I will see if I can help.
Thanks Michelle,
I very much look forward to that tutorial.
I haven’t yet launched my website and not sure how to share a link at this point.
It’s rough being a novice trying to learn how to write code languages and all because things are constanly changing and I have to constanly keep myself encouraged to go forward but thank God for people like yourself spending valuble time to help us noobs out
Hi,
I followed the tutorial but something strange happens in the footer:
http://thinkdog.opengate.biz/
Can you help me?
Just add:
overflow: hidden;
to the ds-carousel-section declaration
Maybe you should try to paste the code in the page specific custom CSS box and save, instead of Divi theme options custom CSS box.
Hi Michelle, I have implemented this on my site, love it, it’s really great. How do I slow down the carousel and have it go slower? TIA The site i am working on is in maintenance mode atm.
Replied on FB but in case any one else wants the same: You need to edit the animation and animation-delay properties, so the first value in the animation property. The animation values in the second and third declarations need to be double what the first value is and the animation-delay value in the third declaration needs to be the same as the animation value in the first declaration. So for instance if you wanted to slow it down by 5 seconds it would look like this: .ds-image-carousel-first { width: 100% !important; max-height: 200px; height: 200px; background: #fff; animation: 20s first… Read more »
Love the look here as does my client. They are wanting to expand to 15 images and I can’t seem to get the right CSS for that third set of 5. Wondering if you can post what that third set of CSS and keyframes should be if nothing else changed. Great work!
Try this Steve. You will need to insert change the class for the last row to fourth and add the new row as third .ds-carousel-section { overflow: hidden; max-height: 400px; } @media only screen and (max-width: 567px) { .ds-carousel-section { max-height: 180px; padding: 0; } } .ds-carousel-logo { width: 20%; float: left; } .ds-image-carousel-first { width: 100% !important; max-height: 200px; height: 200px; background: #fff; animation: 15s first 1 linear; animation-fill-mode: forwards; } .ds-image-carousel-second { z-index: 2; height: 200px; background: #fff; width: 100% !important; float: left; display: inline-block; top: -200px; animation: 30s second infinite linear; } .ds-image-carousel-third { z-index: 2; height:… Read more »
Hi Michelle,
thanks for your code, I’m trying to use it on my web site (15 images on carousel), but it doesn’t work, something is wrong..
The carousel restart from the third row.. How can i change it?
You also need to increase the animation delay for the extra rows or they will just be on top of each other
Hi Michelle, sorry, I follow your code but I don’t understand where is wrong.. Just because I need a 15 images carousel.. Thanks for your support.. and sorry but i’m going crazy.. /////////////////////////////////////////////////////////////////////////////////////// I followed all of your steps, but can you explane or suggest me which is the error: Sequence: – Firsrt row Start: ok! – Third row Start: Why? – Firsrt row Restart: Why? – Firsrt row Restart: Why? .. Second and fourth rows don’t appear.. /////////////////////////////////////////////////////////////////////////////////////// Divi (ID & CSS Class): ds-image-carousel-first ds-image-carousel-second ds-image-carousel-third ds-image-carousel-fourth (same images of first row) /////////////////////////////////////////////////////////////////////////////////////// .ds-carousel-section { overflow: hidden; max-height: 400px;… Read more »
I have just updated the post, please re-read and if needed download the free layout
Hi – I adjusted the animation delay (I have 6 rows, plus a seventh (repeat of the 1st). For some reason, after the 3rd row, it repeats the second and third rows and then goes blank….then restarts from the second row. Any ideas? I adjusted the animation delay 15 seconds per row…
http://devsite.jsnell.com/products/paper-handling-finishing-systems/binding-equipment/
Hi Michelle,
I’ve tried the code above. The new row I added is working however now the second row is not showing>
Can you please help.
I have just updated the post, please re-read and if needed download the free layout
Hi Michele – thanks for this post. I followed the tutorial and everything worked well, except I experienced the issue where an additional row, or rather, some added space (~100px), had been inserted below the client logo images. I went into the CSS and changed: .ds-carousel-section { overflow: hidden; max-height: 300px; to .ds-carousel-section { overflow: hidden; max-height: 200px; …in order to keep the height of the row consistent with the 200x200px image size. This corrected the problem for desktop and tablet screens, however when I reduce the browser to the size of a smartphone screen, I experience the same issue… Read more »
Simplest way it to reduce that size even further using a media query with a breakpoint set to the affected screensize
and how do I do that?
So you would take the existing declaration you have adjusted and wrap it like this:
@media only screen and (max-width: 479px) {
.ds-carousel-section {
max-height: 100px;
}
}
Hi Michelle,
Me again, I was wrong about having to change the max height on the ds-carousel-section from 300px to 200px because the 300 does actually work correctly in the code. Since the last thing I changed was the numbering that I messed up when giving the images their CSS class, I have discovered that my mess up was the only reason why I couldn’t get it to work the first time. I am very sorry about the mix up, your code is perfect!!
Thanks
Barry
You are most welcome Barry and glad you got it sorted
Hi Michelle, My problem Is solved!!! How? Instead of a max height of 300px on the ds-carousel-section I changed it to max height of 200px and that aligned the pictures perfectly side by side instead of being stacked. And the reason why there was no scrolling affect is because me (like a dummy) had the image carousels numbered with 1st, 2nd, and 3rd, instead of first, second, and third which had to be named that way as to correspond with the code. It’s a good thing I am actually learning HTML5 & CSS3 right now or I probably would have… Read more »
Greetings,
I just followed your video step by step and added the code and mine came out with columns of 2 pictures stacked on top of each other with no movement. I’m using the latest version of Divi theme 2017 download. Is there a way to fix it? Thanks.
Barry
Sounds like you possibly didn’t add the correct classes or put them in the wrong place but without a link its impossible for me to tell.
Thank you, Michele, for sharing this beautiful tutorial.
I received the layout by email and pasted the CSS into the style sheet. All images are 200×200 but there is a very wide space next to each image. See:
Can you tell me how do I remove the space and leave as your demo?
My divi is 3.0.51
Thank you!
The space is only there on large screens, if you reduce your browser width you will see that space reduces. You can use larger images and then use media queries to reduce the image size on smaller screens
Hi,
I did everything 4 times and it does not do the right thing. Images are too small. I redid all images 200×200, Can you help please?
http://www.dega.com/real_estate/caddo-creek-ranch-east-texas/
I see you are using the Divi builder plugin rather than Divi itself so your code should be slightly different. Try adding the following:
.et_divi_builder #et_builder_outer_content .et_pb_module img {
width: 100% !important;
}
I don’t see any custom classes in your code so this CSS is likely to apply to all images, you will need to add in a class
I am having trouble with the speed of the individual rows and the responsiveness. Please help!!
Can you be more specific please?
Thank you so much! I have been trying to do figure out how to do something similar to this for so long. You are a lifesaver!
Most welcome Jessica
Hi Michelle,
I am having issues with getting the third row to show up. I think it has something to do with the sizing of the image but I’m hoping you can help. Here is the link
I can see the third row so assuming you got this fixed?
Hi Michelle,
Great tutorial and just what I needed. Is there a way to make the carousel stay within a smaller horizontal area…I guess what I’m trying to say is not full-width?
Yes! Change this section of CSS
.ds-carousel-section {
overflow: hidden;
max-height: 300px;
}
to this
.ds-carousel-section {
overflow: hidden;
max-height: 300px;
width: 80%;
margin: 0 auto;
}
And adjust as needed
Thank you!
Is it possible to incorporate a lightbox so that when we click on an image in the carousel it becomes larger and people can see more detail in the image?
Yes the image module incorporates a lightbox option, but i haven’t tested this so not sure how it will function with the animation
Hi again, I got it to run slower, thanks for your answer, my other problem is that my photos don’t stick together in the computer (white space between), on the phone it looks good, my images are 200 x 200
thanks again for great help
The space is only there on large screens, if you reduce your browser width you will see that space reduces. You can use larger images and then use media queries to reduce the image size on smaller screens
Thanks Michelle for your very helpful blog! I’ve followed the carousel instructions verbatim, but have a weird vertical line between two of my logos. It’s between the 2nd and 3rd sections. Here’s a link for you to take a look. https://www.coffeebunker.org/ I’ve double checked all my image sizes and settings, and don’t see anything amiss. Any ideas?
I thought I had corrected this in the CSS, try changing this part: @keyframes first { 0% { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); z-index: 3; } 99.99% { -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); z-index: 3; } 100% { z-index: -1; } } to @keyframes first { 0% { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); z-index: 3; } 99.99% { -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); z-index: 3; } 100% { z-index: -1; opacity: 0; } }
Hi Michelle,
I did the same tutorial as you show in the video and I copy the css style in my style sheet of my child theme.
When I launch my page I see all the logos 1x but in the second passage it misses the first 5 which no longer appear I have to update the page to see them again and after it disappear again you can help me on this problem. Thank you to Michelle
Dan
I would need to see a link to the page please
Thank you Michelle.
Hi! Thank you so much for this tutorial–it saved me from the alternative $99 plugin! One quick question–my 2nd and 3rd rows aren’t inline with the 1st row. You can preview here:
Hey Jessica, this is because you changed the aspect ratio of the images, so in the CSS you need to change the top position for the second and third rows, -800px looks about right:
top: -800px;
Hello,
I really liked the post, thanks for it.
But what i need urgently in addition to the above, is once I hover one of the images to click it to open a page , the scrolling stops. with the current situation the user trying to run to catch the image
Another thing please, how to make Arrows right and left to control the views of images.
It’ll be much appreciated if you reply to my queries as soon as possible.
Thanks in advance.
Best regards,
You can use the animation play state property to pause the animation on hover, info here: https://www.w3schools.com/cssref/css3_pr_animation-play-state.asp
For the navigation of the slides, this would require JS and would not work with this example as it is designed to be continuous scroll.
Hi, what code should I add to increase the amount of rows and images that I can use? Great carousel!
I wouldn’t suggest increasing the number of images per row or you will start to need to create media queries for smaller screens as the images will be too small. To increase rows, add another set of rows in the middle and then create a new section of CSS for .ds-image-carousel-fourth and a new set of keyframes.
Please understand I am not able to provide the exact code for each individual use case or I would never have time to do anything else
Doesn’t work on iphone.
Its work for me and in my demo
Thank you very much ! Best regards from the sunny Toulouse (France) and a caress to Harley.
Thank you Guy
I love it, I just have one question, I would like it to run a bit slower
Hi again Michelle,
It’s all good, I found the answer a bit higher up in the comments, thank for a great page and tips
You can increase the timing in the animation properties, just be sure to increase each of them in context, so for example if 15 becomes 20, then 30 becomes 40 etc.
Thanks a lot, I I got it to run slower but I don’t wont the white space between the photos, on phone they look look good but on my 2 computers they don’t stick together, they are 200 x 200
The space is only there on large screens, if you reduce your browser width you will see that space reduces. You can use larger images and then use media queries to reduce the image size on smaller screens
Hi again Michele, thanks a lot for your reply,I did get it to run slower, now my problem is that I have white space between the images that I don’t wont, they are 200 x 200, on the phone is looks perfect, it only on the computers the images don’t stick to each other,
Thanks so much! It looks great. A couple of images slipped in there that weren’t 200×200. I didn’t realize I needed to reload the resized images into the image module, but once I did that, it worked.
Hello, Michelle. what if I want to keep 4 rows in a section and I have 15 images in total.?
You need to add another row of images and add in the animation for that row by duplicating what is there and adjusting the position and animation timing
Hi Michelle, great tutorial! It was so easy to implement as is, but I am having a similar issue with adding new rows. I have 20 images, all 200×200. So I added extra rows of 5 images and duplicated the CSS for the new rows, I have 5 rows total including the duplicate of the first row for looping. I gave the new rows new CSS class as well for “fourth” and “fifth”. The problem is it never gets to the 4th row, it will play 1-3, then infinitely loop between rows 2-3. I have tried adjusting the animation and… Read more »
Yes, the keyframes will also need duplicating and adjusting
This is exactly what I needed and worked the way I needed it to.
Thank you!
Great Myles
Hi,
I have implemented this, but I have noticed after 10 seconds or so and after you scroll down or back up, it starts to double up or overlap. Any idea how to fix this or why this would happen?
I would need a link and browser details to provide any insight
Thanks again, I was able to do 20 images by doubling it so far, still would like do do more as we get more sponsors. I love it and it looks awesome…
Hi! I need to have it something like yours. Would you mind if you share here your CSS codes? THank you!
Hi Michelle,
I follow step by step, I created 10 images, 200px x 200px but I can’t make it work.
I am going to need a link and a little more info Elisabet. Or just download the layout and swap out your images
Hello Michelle,
did you get my comment here some days ago?
Thank you
Hello,
thank you for this tutorial.
In my case, the logos/images don’t repeat.
I have just 4 images.
What can be the fault?
I really couldn’t say without a link to view
Hello Michelle
First thank you for this tutorial that fits perfectly what I wanted to do.
I have a question however, I can not operate this carousel in my homepage. How do I do it please?
thank you in advance
There are no ‘controls’ it is just auto scrolling
#Michelle kindly tell whats wrong with my carousel, I have followed all the steps carefully , this is link where I have a problem http://www.i2ica.ca/
You appear to have your rows in separate sections, you need all three rows in a single section
Hi Michelle. How do I do this with 4 images 500px wide by 311 px tall? I have the latest Divi and have the updated css, but all they do is stack on top of each other. I have created 3 rows of 2 and tried adjusting the css, but nothing works.
can you please help?
Thanks
Diana you need to divide 100 by 4 to get the percentage width, so in your case 25% instead of 20% as in the recipe. You will also need to increase the max-height for the section and the top position based on the height of your images. If your content is stacking I would say you have missed adding a class somewhere.
Hi Michelle. This is great. How do I get this to work with 4 images that are 55px wide by 311px tall? I tried putting 2 images in each row, but they will not display next to each other no matter what I do. They will only stack on top of each other. can you please help?
Thanks!
Sorry. 500 px wide. Not 55. Thanks
Dear Michelle!
Thank you for your great tutorial. I have only one problem with it: After the first rotation, the first and third sections fail to start again and only blank space shows in their place.
Regards,
Gábor
You must have an error somewhere in how you have set it up. Have you tried downloading the layout and changing the content for your own?
Thank you so much, Michelle, for all the information.
Could we customize the code to run blurb in a similar manner? Could you please suggest the changes in the code for the same ?
Much Much thanks in advance
You would basically need to change the module selector to that of the blurb module
Perfect Michell tutorial, but I’m just missing something how can I put the sliders left and right? it’s complicated?
There are no slider arrows (if that is what you mean) in this tutorial, it is automatic animation. For that you will require JS
I love this code! Remember I’m the one who got it to slow down in the above comments and stuff?! (and always does things the hard way? but we won’t mention that again… LOL) However, I, too, want to have a long lazy progression of about 20 images… (Not logos) and I am having the WORST time figuring out the change in code for that. I can get the first two sections to show… then there is a gap which shows background, then only sections two and five show of five. Absoluletly kinda driving me insane! LOL I know it’s… Read more »
Really impossible for me to tell what is wrong with so much customisation. Every person is going to want something slightly different and its impossible for me to create something to fit every need or provide code to everyone to modify it for their needs. I can only suggest studying what the code is doing in details so you can see where yu need to add and adjust and also make sure that the first and last rows are always identical.
Hi Michelle, I’ve tried to add an extra row, but the second row keeps overlapping my extra fourth row. Here’s an testsite te see that’s happening (I’ve increased the total height, so every row is visible and also speelded up the animation for testing purposes) – Any idea how to get the second row ‘loop’ after the fourth row? The CSS I’m using here is: /*Stops the browser creating a horizontal scrollbar*/ .ds-carousel-section { overflow: hidden; /* max-height: 300px; */ max-height: 800px; } /*Reduces the section height on mobiles*/ @media only screen and (max-width: 567px) { .ds-carousel-section { max-height: 140px;… Read more »
Where have you added the extra row? It should be after the second row and the fourth row should still be identical to the first row.
Hi Michelle,
Thanks very much for your feedback. It took me a while to noticed it, but better late than never
I think I actually have the code correctly added. I have three different rows with logo’s, and the fourth one is the same as the first one. You can view it here:
I’ve spend hours trying to figure out how to adjust the CSS correctly, but I just don’t seem to have enough experience. Hope you can help me with this (I will instantly become a member! :-))
Unfortunately Wendy you have the animation moving far too fast for me to debug it, can you slow it right down please
Hi Michelle, I’ve recreated the styling with your CSS and changed the following: • I’ve added a ‘.ds-image-carousel-fourth’ class + the accompanying keyframe (with of course the neccessary alterations) • I’ve disabled the height of the four classes, so you van see what is happening • I’ve increased the total height, also for viewing purposes As you can see, the loop is showing as it should until the fourth row (which is the same as the first row ). That row appears beside (or underneath) the third row in stead of behind the third row. I hope you can help… Read more »
Have you increased the animation delay for what is now the last row? As you have added a row in the middle, you now need to delay that last row animation by whatever the animation duration you are using for each row.
Hi Michelle, Thanks again for the feedback! The delay duration of row 4 is twice de delay of row 3 and I it looks to run at the right time. Row 2 however looks to run too early. I’m having: – for the first run: gold > green > pink > green & aqua (the last one should be just aqua) – for the loop: green & aqua > pink (row 2 & 4 keep running at the same time) Ik have set the row order in colours: row 1 = gold row 2 = green row 3 = pink… Read more »
Hi, loved the tut, im thinking, can i use it to place a button and a text, i mean like a slider of a column which has button and text instead of just an image.
Yes you could use a different type of module if you change the classes in the CSS
Hi, Michelle:
See my page: https://ciclismoasturiano.es/colaboradores/
Do you know why it does not work?
Thanks.
Regards,
Juaco Amado
You have changed the number of images used so you need to change the CSS to match
Hi Michelle,
Thank you so much for this tutorial
One little question: is it possible to make the images slide more slowly?
Thanks!
Yana
Yes, you can adjust the animation speed in this section .ds-image-carousel-first { width: 100% !important; max-height: 200px; height: 200px; background: #fff; animation: 15s first 1 linear; animation-fill-mode: forwards; } .ds-image-carousel-second { z-index: 2; height: 200px; background: #fff; width: 100% !important; float: left; display: inline-block; top: -200px; animation: 30s second infinite linear; } .ds-image-carousel-third { z-index: 1; height: 200px; background: #fff; width: 100% !important; float: left; display: inline-block; top: -400px; animation: 30s third infinite linear; animation-delay: 15s; opacity: 0; }
Hello Michelle, I was able to make it work but.. I had other sections under this scrolling one that disappeared..
Unfortunately this is not in a public area so I cannot link it here,
Is there any other way to show you in private what happened?
thanks for your hints
PierLuigi
You can email me with details on the contact page
Michelle, thank you for taking the time to write this tutorial. This is such a clever way to achieve this result, any mathematician would be impressed. Simply amazing! I officially invite you to dance at my wedding (should I ever choose to get married.)
Thank you!!!
Haha thank you Matt, although you probably wouldn’t say that if you saw me dance
Hey! I cant seem to get it quite right. It seems to be messing up my page. When I scroll, it shifts and scrolls outside of the page borders. What am I doing wrong?
Sounds like you do not have all of the CSS correct, the content outside of the page should be hidden if you had added everything correctly
kisses to you
i tried on a project and i am so happy it worked
love you
Most welcome
Hello Thank you so much for the tutorial !, my question is: how can I give space to the sides of the carousel? With padding in the module section settings? About 50px
Thank you very much for your help
Easiest thing to do is create your images with the space around them you need, then you don’t need to fiddle with the CSS
Thank you so much for posting this! It is so hard to find anything on this subject online. I am having an issue on my slider where section 2 and section 3 are not coming together all the way. There is a small sliver of background showing and I’m not sure how to get rid of that.
Do you have a link please Christine
Thanks Michelle!
Thanks a lot for your explanations! I follow you and I have done a lot of them. You are very easy to follow, even English is not my language. I don´t know if you could help me, because this time I fail in my intend to do this carrousel. I did in in a new page, but then, I realised that I whant it on my home, whitch is done in Extra on the divi builder. So I have add a new section at the botom (that is where it has to be) and follow all your instructions. The result… Read more »
You have disabled right click so I cannot inspect your code to help
Hi Michelle,
We have been trying to implement your code but we have encountered a problem where the first set of images scrolls through fine once and then vanishes. The second and third sets scroll through and repeat correctly but the first one is never shown again. I have included a link to what we have set up in the website section of this comment. If you have any ideas on how to fix it that would be fantastic.
Thank you,
Doug.
Doug the first and last rows must contain the exact same images, have you done this?
Ah thank you Michelle, that was what was up, I’ve corrected that and now things are working nicely.
Great
Very useful!! Will this work for a shop section with woocommerce?
Potentially yes but it will require using a different module type so rewriting the CSS
Yup, it’s great. Maybe more than great
But i was wondering if there was a way to reduce the white space below it. http://candnpropertyrefurbishment.co.uk/boiler-replacement it’s probably not too big of a deal but bugs me a little. The divi live editor shows no padding to be removed under it.
Looks like you got this sorted Nicholas?
I am having the same issue and have not found a way to correct it yet. Any suggestions?
Thanks!
Can you post a link please Scott
How did you get this fixed? I have white space below that I would like to reduce also.
Thanks!
Great one Michelle, congrats!
?
2 questions for my noob self..
Is there an easy way to:
a. have the sliding from left to right instead of right to left?
b. Which parameters should I change to change the animation speed and not have blank spaces
The timing is set in the animations, so where it says animation: 30s third infinite linear;
You can change the direction but editing the positions of the transform properties in the @keyframes
Hi Michelle! Thank you for this awesome tutorial. You are a huge help to everyone. I hope you could help me with my issue. I can’t afford paid support just yet. Sigh. I would like to add 2 more rows with different set of logos but i can’t make it work. My carousel won’t display the other 2 rows I added. The structure looks like this: row1-row2-row3-row4-row5-row1. After row1 is displayed, only row 2 and row 3 is visible. Can you please guide me on how to add 2 more rows? Looks like I am missing something. Here’s the link… Read more »
I am getting a dangerous website notification when clicking your link Carl so I have had to remove it. You can let me know when you get that fixed
Hi Michelle! Great tutorial. I followed your steps and got a pretty close result. However, when the second carousel starts scrolling, it is misaligned, its moved down 20 pixels or so, and then the continuous scroll from there on out is flawless. Any idea why the second carousel is being pushed down slightly? please check the following link to see what I mean http://alexzond.com/testeroo-2/ … Thank you!!
It looks like your images are too big Alexandre, they should be 200px and yours are around 300px
Hi Michelle,
Just found your site and it is epic, love it.
One question – pretty sure I followed the steps but there seems to be a load delay between each set of 5 logos. It creates a white space before the first logo of the next step pop up. I have checked and animation is off.
Any ideas what the issue could be.
Can you post a link please Mat and I can take a look
Thanks Michelle.
It is on the bottom of this page – http://www.quinndownes.com/home/
You will see above it I did something using posts but did not like it. You solution is much nicer but there are two issues (a) the timing gap and (b) the FAI logo appears over the deloitte logo first few times it goes round.
Any ideas
This is looking fine for me Mat, assume you got it sorted?
Hi Michelle it is – http://www.quinndownes.com/home/
I also noticed that the last logo in set 1 (FAI) partially covers the first logo in set 2 (deloitte). This seems to sort itself out after a couple of revolutions.
Thanks Michelle! It’s just the thing I was looking for. Great work.
Glad it was helpful Michael
Would it be possible to use this code for the Person Module instead of just images?
Yes in theory it will work with any module but you will need to change the selectors in the CSS
What a great trick. But, my client just noticed it doesn’t work on a Mac with Safari. Any ideas?
I had it tested on Mac Joe and it was working, do you have any browser version info?
Just the trick! Thanks!
Hey, Michelle. I am having some issues with getting this to work… I followed the directions explicitly and placed the CSS code in the Divi settings, but when the page loads, it’s stacking the sections vertically on top of each other, and only the first five images are displaying. Can you help?
Its likely you missed a step Anthony, I would need to see the page to troubleshoot
I love this.
Hi Michelle,
Awesome tutorial! My images aren’t spaced apart like yours are on your carousel. Mine are literally right next to each other. Do you know what the cause might be? Images are all 200×200.
You need to have some white space around the actual logo within the image itself Chris. Mine are 200×200 in size but the logos themselves are probably around 150×150
You are amazing. This is literally the first time I have followed a tutorial that has actually worked! Thank you. I’m thrilled with this !!
Haha, that’s reassuring Lauren thank you
Thank you for this great tutorial. I have followed all the steps (except that I didn’t see the option for Keep Column Padding on Mobile). It is working fine on mobile and tablet, but on PC I do not see anything. Do you know what could be the problem? (here’s my URL: bartekcnc.sk)
Can you indicate where about on the page the carousel should be please Andrej
This is really cool I did the same as you said. I have just 7 logos to be put in carousel . But mine is something jumbled. Here is the link http://504.ec5.myftpupload.com/home/ Please help .
I created the 5 images in one row and duplicated it twice as u told, but in the second row, I changed just first two images to the ones which arent there in first row and the rest from the 2nd row i kept same as the previous row.
Look like you got this fixed Pooja
Thanks Michelle – seems not to be working that well in Google Chrome and Firefox. It’s scaled down quite small and scrolling in a small section right of screen?
Do you have the correct margin and padding settings for mobile Frank?
Hi! First than you for the awesome recipe:)
I used this to present our work projects…the problem is with text the whole thing is a little bit too fast. How hard would it be to make it a bit slower? I assume it has something to do with the seconds and the css? (im new at this).
Thank you!
Yes this is a simple adjustment, just change the animation speed in each of the 3 sections, be sure to make the speeds relative too
animation: 15s first 1 linear;
This is great. Unfortunately, however, it didn’t go that well in my case because I only had two sets of three icons each. It also seemed to be the case that the orientation of some of my icons meant that have of them disappeared in the footer. I suppose the big question i have is how are these various snippets to be incorporated with one another? Ideally, I would like to have this scrolling effect through out my website on all the pages. Whatever the case, thanks very much Michelle for continuing to demonstrate to us what can be achieved… Read more »
James you would need to change the CSS to the carousel is split into thirds rather than fifths and to have it everywhere just make it a global module and add to all pages
Hi Michelle,
Do you know of a plugin that does this exact same thing? I saw you suggested the Super Carousel but I don’t see the same effect. It does slide show but not the automatic Scrolling Image Carousel effect. Thank you!
Hey Art. Yes it does do this as I use it on a site, although I think in the demos it is not shown.
Michelle;
Most excellent work and probably one of the best things I have seen for a Divi section!!! Question, is there a way to add text below the images for a persons name or position?
Thanks again for this wonderful gift to the Divi community :o)
Yes Shawn, you could use text modules instead and add an image with text underneath. The CSS may need tweaking a bit but its definitely doable
Hey Hey! Thanks so much for the tutorial. Im having a small issue though. Between the scrolling images and my next section, there is a big gap. How do I fix this. you can see what im talking about here http://www.alcreativellc.com/#tag
Your images are shorter than the ones used in the demo so you can adjust the pixel values and reduce them. You can also remove margin and padding from the top of the section below to move that up a bit
When I view it on my mobile phone the width of the images seem jammed together. One of them is cut in half. There is a gap between the sections.
You can create another version for mobile with 2 or 3 images across or use media queries to adjust the appearance. If the images are not too large they should be OK on mobile but you also may want to hide it on smaller screens anyway as it is likely to get scrolled past
Hi Michelle – firstly thankyou for this it’s brilliant and beautiful.
I have one small issue though as I’d like to only use 7 images, but when I take images 8,9,10 out of the 2nd module, the space where they were is still left in the carousel so you get a huge gap between image 7 and 1.
Is there something really simple that I’m missing to make it all work seamlessly?
Thanks
Hi Mike, with this you can’t use 7 images as there needs to be an even number. You can reduce the number of images you use but removing image modules in all three rows but you will also need to do the calculations and change the CSS accordingly
Hi Michelle,
The code is great, I tried to use it on a website and it looks great !
Is there a way to have a little space between logo on tablets and smartphones ?
Thanks for all,
Bastien
Bastien you would need to write some additional media queries for the smaller screens, I would suggest perhaps reducing the number of images in the rows for mobile
Hi Michelle! Great Tuto!! Love it!. But I have one issue. I set the images at 200×200 and in a small screen they look close to the other but if you enlarge the screen (or the resolution) there’s a gap between the images…
any thaughts?
The site is still in development
TIA
I really would need a link to see what the issue is Daniel
Great tutorial Michelle. Thank You!
One question: Can I make the images bigger? Say 300×300, instead of 200×200
They can yes but you would need to adjust the CSS accordingly and you will probably want less than 5 images in a row
Believe it or not, this is very difficult information to find when searching! I am a horsetrainer/author/website tinkerer and want to do everything the *hard* way (LOL) so, yeah, thank you so much for showing us how to do this withOUT a plugin! Took a while but got that puppy hammered into submission! (…because, again, I do everything the *hard* way! LOL) I even figured out how to put a menu over the top that doesn’t scroll and how to slow down the scrolling effect! You are awesome! I am awesome! Life is awesome! This just totally made my week!… Read more »
Haha, yep know exactly how you feel
Well done!
Michelle Fab-u-lous Worked first time which for me is quite something and proves beyond doubt how easy to follow your instructions are. I also appreciate your explanation of what each portion of the code sets out to achieve. However I do have one issue which is that despite all images being exactly 200 by 200, on the desktop there is a small gap between image 10 and image 1 which reveals the images behind, presumably 1 to 5. On a tablet the gap is wider and the images 1 to 5 are more obvious. On a mobile it’s perfect. If… Read more »
Strange, looks like your width setting is getting overridden somewhere but I can see where with just dev tools. A solution would be to change this section of the CSS @keyframes first { 0% { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); z-index: 3; } 99.99% { -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); z-index: 3; } 100% { z-index: -1; } } To this @keyframes first { 0% { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 99.99% { -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 1; } 100% { opacity: 0;… Read more »
Michelle Many thanks for the edit but I’m afraid it makes no difference. On the desktop between image 10 and image one there is a sliver of see through revealing the frames behind. On a tablet (iPad) there is a much larger gap but I also notice that image one is squashed which is allowing the gap to be there perhaps. As I said before I have checked again and all images are exactly 200 x 200. Michelle, I would love to have this carousel working properly but do please say if you can’t help any further as I’ll willingly… Read more »
Michelle
It’s fixed – thank you so much. This is a site I just did not want to release to a live environment with a ‘flaw’ in it so thank you again.
Brian.
Thats great new Brian
Hi Michelle
I have used the new CSS but the images do not seem to stack horizontally but vertically. DIVI is updated to the latest version and I even used the downloaded json file but its still not working any Idea as to what it can be I did check all the css Class ?
Okay so it did not want to pull the code from my child theme and I inserted the code in to the page specific css and It started working
Great
Rehan, when did you download the file? I updated a few days ago due to a Divi update. Check the CSS in the post and make sure it is what you have
Hi Michelle, thank you so much for your really good recipe. . I have followed all the steps in the recipe but I doesn´t work. I use the extra theme – is that the problem?
Yes the selectors used are for Divi so it won’t work in Extra
This is fantastic, Michelle, thank you!!
Welcome Mario
Is there a way to have it scroll from bottom to top or top to bottom instead of from right to left?
Yes but you would need to rewrite the entire CSS. You would need to adjust the starting positions of the modules and also adjust the direction and speed on the animation
Hi! Now the easiest question here: I don’t know where/how to copy the code.
Doris please take a look at the blog post, there are three places you can add the CSS but for simplicity try Divi>theme options>custom css
This is such a great tutorial, and one that I have been needing…thank you for this, I cannot thank you enough…
Thank you
Hi Michelle. Love your website and have found it very use for since I’ve started using Divi. I would love to use your scrolling carousel but unfortunately, I am experiencing stacking issues . I saw that you made a note about on the top of your page. Do you know if this code still functions or has new the Divi updates caused any issues?
The update to 3.0.15 caused another issue Walter but I have just updated the post so please use the new CSS
Thank you for the quick response, your code is now working. The only issue I have now is that there is too much space in between the images. Would you know that best way to decrease the amount of space in between images?
Walter you can make the actual content of the images larger so there is less white space in the actual image
Also the carousel seems to stack incorrectly when viewed on a mobile device. The error is most obvious when viewing from an iPad.
Walter this was due to a Divi update, please check the CSS in the post which has been updated
You are awesome, as always! Thanks for giving so much for the whole Divi Community!
Welcome Andre
Hi Michelle,
2 problems……:
1. on iPad 4 still no scrolling. Tried many ways
2. while update Divi to 3.0.15 the stacking problem was there again. Even when I used amanded code.
Do you have a solution for these 2 issues ?
I have updated the CSS in the post for 3.0.15 Dennis but I cannot replicate your iPad issue, it is fine on my iPad Air???
Dennis, did you solve your problem. I have similar issues. When I shrink screen size everything works. Otherwise they are stacked.
This looks great, but I wonder what I am doing wrong here. With me, I have 3 rows of images on a different level. So 5 on top, then 5 slightly down, and the 3rd row down even more?
Are you using Divi 3.0.15 Helen? If so I have just updated the CSS with a fix, please check
Hi Michelle, GREAT stuff. I’m also having the same issue as Helen and Anthony (just search “on top”).
Scroll to the bottom where there’s some misalignment? Is it perhaps because of the -400 and -600 padding you had? I tinkered with that a bit, but no luck
I am getting a 404?
Hi Michelle Can you please help me. I have followed all the steps in the recipe but I have noticed that when I resize the browser window to be larger the Images the images also resize (to be larger) – and then the bottom of the images disappear (all the images are exactly the same size) – which is not want I won’t to happen. I have triple checked that I have followed all the steps correctly. It’s disappointing that this is happening because I was excited to use this functionality on my website, up until I tried viewing the… Read more »
I am not entirely clear what is happening Tony, can you provide a link please?
Hi Michelle
It looks like my problem was the size of the images I was using, I reduced the size of the images to by 120px X 116px and that seems to have resolved the issue I was having yesterday. With a few tweaks to the CSS (i.e. the height of the rows and the max-height) I’m happy with the scrolling carousel.
http://tonykingcelebrant.com.au/contact/
I look forward to your next recipe.
Thanks
Great news
Lovely tutorial! I just have a quick question: is there a simple way to create this effect with text? I have a client that wants a scrolling text carousel and, while I was able to get this to work beautifully, translating it into text has been a bit of an issue for me. Any suggestions would be great! Thank you!
You can simply replace the image modules with text modules, but you will then need to edit the CSS to limit the width of the text modules as well. Tbh though, blocks of text scrolling on a page doesn’t work well as its difficult to read moving text
Hi Michelle. On pc it works, also on my iPhone. But on my iPad it’s not scrolling.
Which iPad Dennis? It works fine for me. There is one issue that when you rotate the screen the animation may stop so if you are doing that just refresh the page
ipad 4th edition
Hi Michelle, I have one row of 5 and one row of 3 so I have 2 spaces? How to I avoid having the space?
You will need to create 2 rows of 4 and adjust the 20% in the CSS to 25% Kirsty
Thank you so much Michelle – I just followed your recipe and it worked like magic. I appreciate you giving to the community! Would love to take one of your classes – just need to find the time.
Look forward to learning more
Thanks Judy glad it worked well for you, would love to have you in a class
Thank you for this. Well done!
Thanks Logan
I know that Bob Richardson asked about lightbox effect and such, but how would you just make the scroll stop on hover and, perhaps, make the logo image linkable? Would that also require some js?
The images are linkable Michael, just add a URL in the link field of the image module. The stop on hover would require JS yes
Hi Michelle,
Thank you so much for this tutorial, I had this idea 2 months ago and only attempted trying it in Divi yesterday and I found your tutorial via google. You saved me countless hours/days/weeks in trying to figure out how to do something like this!
Is there a way to change the auto scroll affect, to also include arrows to navigate left or right or by using mouse drag?
Thank you,
Debora