DiviTwist.com Logo

A Refreshing Twist of Tools, Tips & Tricks for Your Divi Site

An Amazing Divi Marquee / Carousel: How to Create it and Free Download

Jun 8, 2022

  • Image link to jquery site
  • Image link to Java script site
  • Image link to html site
  • Image link to css site
  • Image link to Elegant Themes site
  • Image link to php site
  • Image link to wordpress site
  • Image link to jquery site
  • Image link to Java script site
  • Image link to html site
  • Image link to css site
  • Image link to Elegant Themes site
  • Image link to php site

A carousel or marquee is a sliding image, or group of images or words. The <marquee> was once a widely used tag in html. When the industry shifted from styling html to using css, it stopped making sense to have a marquee tag in the html, since it styles words or images.

Currently the <marquee> tag still works, but it is deprecated, so it most likely won’t be recognized in the upcoming future.

So, there must be a way to get that same carousel effect with css. There is, and it works with Divi! Here’s how to do it.

Carousel Settings Within the Divi Builder

For those wondering, this is the way to get the carousel effect using Divi. These instructions will need adjustments outside of the Divi environment.

In order to work correctly, this assumes you have images that have been cropped and set on backgrounds of equal width and height (eg all images are 150px x 150px). The images in this example are available as part of the free download!

Using the Divi Builder, create a section. Then add a row within the section, and then add a text module within the row.

Edit the section settings. In the “Design” tab, you want to change the spacing to be:

padding-top: 0px;

padding-bottom: 0px;

Image showing section padding settings of Carousel.

Now, edit the row settings. In the “Design” tab, you will want to change the sizing to be:

Width: 100%

Max Width: 100%

Image showing row design settings of marquee.

The Marquee Text Module

The text module takes a little more time and effort.

Working within the text (not visual) area of the text module create a div with a class of dt-marquee.

Image showing text vs vistual area of text settings of marquee.

Within that div, create an unordered list <ul>. Then, set the <ul> class to dt-marquee-content. It should look something like this:

<div class="dt-marquee">
    <ul class=".dt-marquee-content>
    </ul>
</div>

Add each media image as a list item <li> into the unordered list <ul>. Each image should be its own uniques <li>. Remember to define your alt tags and set the height and width for each image! For this example I have set each image to have a height and width of 100. For each <li>, add the class dt-marquee-li. Here is an example of what two images will look like:

<div class="dt-marquee">
    <ul class=".dt-marquee-content>
        <li class="dt-marquee-li"><img src="https://divitwist.com/wp-content/uploads/2022/03/jquery.png" alt="Image link to jquery site" class="dt-marquee-img" width="100" height="100" /></li>
        <li class="dt-marquee-li"><img src="https://divitwist.com/wp-content/uploads/2022/03/JS.png" alt="Image link to Java script site" class="dt-marquee-img" width="100" height="100" /></li>
    </ul>
</div>

If you want your images to have links, you will need to add them manually by surrounding the images with <a href> tags like so:

<div class="dt-marquee">
    <ul class=".dt-marquee-content>
        <li class="dt-marquee-li"><a href="https://jquery.com" target="_blank" rel="”noreferrer noopener"><img src="https://divitwist.com/wp-content/uploads/2022/03/jquery.png" alt="Image link to jquery site" class="dt-marquee-img" width="100" height="100" /></a></li>
        <li class="dt-marquee-li"><a href="https://www.javascript.com/" target="_blank" rel="”noreferrer noopener"><img src="https://divitwist.com/wp-content/uploads/2022/03/JS.png" alt="Image link to Java script site" class="dt-marquee-img" width="100" height="100"  /></a></li>
    </ul>
</div>

Additionally, add a class to each image called dt-marquee-img. Complete the above steps for all images in your marquee.

Duplicate the Data

Now, in order for this to work properly, we need to duplicate almost all of the data we just created. Copy the html text for all images except the last one, and paste just below your last image.When you’re done you should have something that looks like this:

<div class="dt-marquee">
    <ul class="dt-marquee-content">
        <li class="dt-marquee-li"><a href="https://jquery.com"><img src="https://divitwist.com/wp-content/uploads/2022/03/jquery.png" alt="Image link to jquery site" class="dt-marquee-img" width="100" height="100" /></a></li>
        <li class="dt-marquee-li"><a href="https://www.javascript.com/"><img src="https://divitwist.com/wp-content/uploads/2022/03/JS.png" alt="Image link to Java script site" class="dt-marquee-img" width="100" height="100"  /></a></li>
        <li class="dt-marquee-li"><a href="https://www.w3.org/html/"><img src="https://divitwist.com/wp-content/uploads/2022/03/html.png" alt="Image link to html site" class="dt-marquee-img" width="100" height="100"  /></a></li>
        <li class="dt-marquee-li"><a href="https://www.w3.org/Style/CSS/Overview.en.html"><img src="https://divitwist.com/wp-content/uploads/2022/03/css.png" alt="Image link to css site" class="dt-marquee-img" width="100" height="100"  /></a></li>
        <li class="dt-marquee-li"><a href="https://elegantthemes.com"><img src="https://divitwist.com/wp-content/uploads/2022/03/divi.png" alt="Image link to Elegant Themes site" class="dt-marquee-img" width="100" height="100" /></a></li>
        <li class="dt-marquee-li"><a href="https://php.net"><img src="https://divitwist.com/wp-content/uploads/2022/03/php.png" alt="Image link to php site" class="dt-marquee-img" width="100" height="100"  /></a></li>
        <li class="dt-marquee-li"><a href="https://wordpress.org"><img src="https://divitwist.com/wp-content/uploads/2022/03/WP.png" alt="Image link to wordpress site" class="dt-marquee-img" width="100" height="100" /></a></li>
<!-- Need to repeat for continuous look-->
        <li class="dt-marquee-li"><a href="https://jquery.com"><img src="https://divitwist.com/wp-content/uploads/2022/03/jquery.png" alt="Image link to jquery site" class="dt-marquee-img" width="100" height="100" /></a></li>
        <li class="dt-marquee-li"><a href="https://www.javascript.com/"><img src="https://divitwist.com/wp-content/uploads/2022/03/JS.png" alt="Image link to Java script site" class="dt-marquee-img" width="100" height="100"  /></a></li>
        <li class="dt-marquee-li"><a href="https://www.w3.org/html/"><img src="https://divitwist.com/wp-content/uploads/2022/03/html.png" alt="Image link to html site" class="dt-marquee-img" width="100" height="100"  /></a></li>
        <li class="dt-marquee-li"><a href="https://www.w3.org/Style/CSS/Overview.en.html"><img src="https://divitwist.com/wp-content/uploads/2022/03/css.png" alt="Image link to css site" class="dt-marquee-img" width="100" height="100"  /></a></li>
        <li class="dt-marquee-li"><a href="https://elegantthemes.com"><img src="https://divitwist.com/wp-content/uploads/2022/03/divi.png" alt="Image link to Elegant Themes site" class="dt-marquee-img" width="100" height="100" /></a></li>
        <li class="dt-marquee-li"><a href="https://php.net"><img src="https://divitwist.com/wp-content/uploads/2022/03/php.png" alt="Image link to php site" class="dt-marquee-img" width="100" height="100"  /></a></li>
    </ul>
</div>

Once you have added all of your carousel images and links, go to the “Design” tab of the text module and select text.

Image showing text bullet settings area for carousel.

Click on the tab for bullets, scroll down, and set the Unordered List Style Type to “None”.

Image showing text<ul> type settings of marquee.

Now select the “Spacing” option in the “Design” tab and set:

padding-top: 2vw;

padding: bottom: 2vw;

Image showing text padding settings of Carousel.

Now for the CSS Marquee Magic

To add the css we are going to add a Divi code module to our row, just below the text module.

First, we need to tell the browser how we want the images to be displayed. By default, they are one over the other, but they need to be side-by-side. We also need to make sure that we are using the entire width for the marquee. In order to set these, we add:

.dt-marquee-content {    
     display: flex;
     padding: 0 !important;
 }

This also happens to be the place where we define the animation we are using. I’ve chosen to name this animation marquee. I’m going to choose a 15s animation length (you can adjust this if you want to), it should be the same speed from start to finish (linear), and we want it to run forever (infinite). So, now our css looks like this:.

.dt-marquee-content {
    display: flex;
    padding: 0 !important;
    animation: marquee 15s linear infinite;
   }

Next, we need to define the image size. In order to be mobile first, adjust your size for mobile. The images I’m using are an original size of 150px x 150px, but that is way too big for mobile. On mobile, I like the way 3em by 3em images look. I use em, because it scales well with different screen sizes. I define these new sizes by adding:

.dt-marquee-img {
    height: 3em;
    width: 3em;
   }

Now adjust your screen size to look at the images on different screen sizes. Mine look good until about 980px and up. We need to make the images bigger when the screen is larger. I like 5em x 5em on the larger screens. To do this, add:

   @media only screen and (min-width:980px) {
    .dt-marquee-img {
     height: 5em;
      width: 5em;
    }
  }

Fixing the Carousel Width

If you notice, the images are all scrunched together. There should be only one of each logo visible at any given time, and the images need to take up the whole screen width. This means we need to define the size of the marquee.

In order to have a marquee that moves smoothly across the screen, without a slight jump at the end of the animation, we need equally spaced images. This takes a little math. Don’t be scared, it’s basic math that can be done on paper or using a calculator. The reason comes down to needing to round a number to get the appropriate, completely equal, spacing of images.

You may be wondering, “isn’t there a way to do this in CSS?” The answer is yes and no. There is a way to easily do this math in CSS, but the browsers aren’t yet capable of interpreting it. There is also an additional way to “fake” the browser into rounding our numbers, but since we are moving our images off-screen, there is a tiny jump when the animation reaches the end point. Using this method of calculating the values, allows for completely smooth animation that works across screen sizes.

The Marquee Math

First of all we are going to assume that the size of our screen is 100%. We will need to divide that by our number of images so that each image gets an equal amount of space. This works well if we have say, 5 images:

\[\frac{100%}{5} = 20\%\]

Unfortunately, some numbers don’t nicely divide into 100, and have long decimals afterward. This is the case for 7 images:

\[\frac{100%}{7} = 14.\overline{285714}\%\]

This will cause an occasional jump as our marquee moves if we don’t account for the remainder.

Here’s the fix:

Divide the 100% by the number of images in your marquee:

\[\frac{100%}{7} = 14.\overline{285714}\%\]

Round that number up to the next whole number. In the case above, this becomes 15.

\[14.\overline{285714}\% \approx 15\%\]

Now, multiply that number by the number of images in your marquee:

\[{7}\times{15\%} = 105\%\]

This is the new width of our marquee list.

In this area, since we are using flex-box, we also need to make sure the images don’t have any shrink effect.The new css we add is:

.dt-marquee-li {
 
    width: calc( 105% / 7 ); /* Use your calculations for your width from above and 7 becomes your number of images */
    flex-shrink: 0;
}

Adding The Animation

Now all that’s left to do is add the animation. We do this by using the @keyframes rule. We start our animation at a point where there is white space on the lefthand side of the screen, in this case, 10% is a good number. Now, subtract the width calculated above from the 10%:

\[{10\%}\ – \ {105\%} = -95\%\]

Using these numbers and the fact that we want the images to move from right to left, which is along the x-axis, which gives us:

@keyframes marquee {
    0% {
     transform: translateX(10%);
    }
    100% {
     transform: translateX(-95%);
    }
   }
If you want to go the opposite direction you would change to:
@keyframes marquee {
    0% {
     transform: translateX(-95%);
    }
    100% {
     transform: translateX(10%);
    }
   }

Last Touches

The way the marquee currently sets, there is no pause if someone wants to click on the logo link. We need to pause the animation on hover. We accomplish this by adding:

  .dt-marquee-content:hover {
    animation-play-state: paused;
   }

There you go, a super smooth, absolutely amazing full-width (animated) continuous logo carousel (marquee) that works in Divi!

Want the template?

Elaboration and Collaboration

Check out the Divi Twist Forums

0 Comments

Submit a Comment

Your email address will not be published.