R23: How to Create a Scrolling Image Carousel in Divi

by | Oct 3, 2016 | Animation, Images

Sign up to receive all the latest themes, tutorials, tips & tricks from Divi Soup

How to Create a Scrolling Image Carousel in Divi

 

ANOTHER UPDATE: Not sure what is happening with the !importants but with the 3.0.15 update, the older CSS just won’t override the negative margin !important declaration. So this updated CSS sets a max height for the section, and changes the negative margins to negative top positions instead.

UPDATE: If you had an issue with rows stacking in Divi 3+, the code and download have now been amended (Damn !important :/ )

Recipe #23 is something I started working on months ago and forgot about; How to Create a Scrolling Image Carousel in Divi. I found the draft I was working on yesterday when I was doing some cleaning up and thought it may be useful to some but I didn’t really like what I had done so I started again :). 

There are are a few decent plugins you can use but my version uses the Divi image module and pure CSS, so one less plugin to worry about 😉 I have created this as a logo carousel but with some adjustments you could use it to display pretty much anything.

Watch the video, get the code you need in the accompanying blog post, be sure to scroll to the bottom for your fabulous freebie, and let me know what you think in the comments!

So let’s get cooking!

ingredients

The Divi Theme from Elegant Themes

10 images 200 x 200px

cooking-time

This should take you around 15 minutes max.

preparation

The first thing we need to do is set up our section. So add a new section with one column and then in the Custom CSS tab give it a class of ds-carousel-section. You will also want to set the background colour in general settings to the same background colour as your images, I’m using white. Then save & exit.

How to create a scrolling image carousel in divi

 

Now open up the row settings and and apply the following:

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

 

How to create a scrolling image carousel in divi

 

Then click the Advanced Design Settings tab and set the Top and Bottom Custom Margin to 0

 

How to create a scrolling image carousel in divi

 

Then scroll to the bottom and set the Top and Bottom Column Padding to 0 and set Keep Column Padding on Mobile to Yes.

 

How to create a scrolling image carousel in divi

 

OK, that’s our prep done.

method

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

How to create a scrolling image carousel in divi

 

If you want your image to link to a page then enter the URL in the Link URL field, then scroll down and set Animation to No Animation and Image Alignment to Center.  Leave all other settings at their default.

 

How to create a scrolling image carousel in divi

 

Finally, click on the Custom CSS tab and give the module a CSS Class of ds-carousel-logo, then Save & Exit.

 

How to create a scrolling image carousel in divi

 

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

 

How to create a scrolling image carousel in divi

 

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

 

How to create a scrolling image carousel in divi

 

Now we need to open up the row settings for the first row and click on the Custom CSS tab, give the row a CSS Class of ds-image-carousel-first

How to create a scrolling image carousel in divi

 

Then open up the row settings for the second row and click on the Custom CSS tab, give the row a CSS Class of ds-image-carousel-second

How to create a scrolling image carousel in divi

 

Finally open up the row settings for the third row and click on the Custom CSS tab, give the row a CSS Class of ds-image-carousel-third

How to create a scrolling image carousel in divi

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

This section stops the browser adding a horizontal scrollbar, sets a max height for the section and reduces the height of the section on mobiles.

.ds-carousel-section {
    overflow: hidden;
    max-height: 310px;
}

@media only screen and (max-width: 567px) {
.ds-carousel-section {
 max-height: 140px;
 padding: 0;
 }
}

 

This section sets the width of the image modules and floats them to the left so they are side by side instead of stacked. If you want to use more than 5 images then you will need to adjust the % accordingly but I wouldn’t advise more than 5 or they are going to be really small on mobile.

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

 

This section is where we set the properties for each of the 3 rows. We are using negative top position to get each row to display directly next to the previous one. We are also setting the animation duration so each starts at the correct time and stopping the first row after a single iteration as we only need it to play once.

.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;
}

 

Finally, we are using keyframes to add the actual animation effect to get the continuous scroll. The first row is positioned so the images are already on the page when it loads and then we are setting the z-index to -1 when its animation is finished so we don’t see it anymore. The second and third rows are initially positioned outside of the viewable area so when they start to scroll they don’t overlap the first row.

@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;
  }
}

@keyframes second {
  0% {
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

@keyframes third {
  0.1% {
    opacity: 0;
  }
  0.2% {
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    opacity: 1;
  }
  100% {
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    opacity: 1;
  }
}

 

Here is all the CSS. Copy and paste it into your child theme stylesheet, Divi theme options custom CSS box or the page specific custom CSS box and save.

 

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

/*Stops the browser creating a horizontal scrollbar*/
.ds-carousel-section {
    overflow: hidden;
    max-height: 300px;
}

/*Reduces the section height on mobiles*/
@media only screen and (max-width: 567px) {
.ds-carousel-section {
    max-height: 140px;
    padding: 0;
    }
}

/*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 layout for the first row*/
.ds-image-carousel-first {
    width: 100% !important;
    max-height: 200px;
    height: 200px;
    background: #fff;
    animation: 15s first 1 linear;
    animation-fill-mode: forwards;
    
}

/*Sets the layout for the second row*/
.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;    
}

/*Sets the layout for the third row*/
.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;
}

/*Animation for the continuous scrolling effect*/
@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;
  }
}

@keyframes second {
  0% {
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

@keyframes third {
  0.1% {
    opacity: 0;
  }
  0.2% {
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    opacity: 1;
  }
  100% {
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    opacity: 1;
  }
}

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

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

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

Like us on Facebook

Categories

Archives

WP Theme FAQs
WordPress Theme Editor
Elegant Marketplace - Divi Child Themes, Plugins and Tutorials
Elegant Themes

Other recipes you might like...

If you liked this then you'll love

The Club

Find out more

Pin It on Pinterest

Share This

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!