How to: Create a Pure CSS Scrolling Slider

by Utsab Karki, Senior WordPress Developer

Insights / Website Development / How to: Create a Pure CSS Scrolling Slider

You’ve certainly seen a scrolling slider as you’ve browsed the web; perhaps it’s a parade of company logos or icons automatically moving across the screen.

These sliders (which are different than website carousels) are usually created using some HTML for the structure, CSS for the styling and JavaScript or jQuery plugins for interactivity and animation. But if you don’t need complex animation, you can create a slider with just HTML and CSS.

Here’s how.

The HTML Markup

In order to create the scrolling slider, let’s first add the following HTML markup to the page.

<div class="logo-slider">
     <div class="logo-slider-inner">
          <div class="logo-slider-single">
               <img src="{ path to first logo }" alt="{ Alternate text for logo }" />
          </div>
          <div class="logo-slider-single">
               <img src="{ path to second logo }" alt="{ Alternate text for logo }" />
          </div>
          <div class="logo-slider-single">
               <img src="{ path to third logo }" alt="{ Alternate text for logo }" />
          </div>
     </div>
</div>

In the above markup, we create a parent container div with class logo-slider. Inside the logo-slider div, we create another div with class logo-slider-inner.

Inside the logo-slider-inner div, we add all the logo images in an img tag wrapped in a div with a class of logo-slider-single. After all the images are added, we duplicate the div with class logo-slider-inner, so the HTML should now look like this:

<div class="logo-slider">
     <div class="logo-slider-inner">
          <div class="logo-slider-single">
               <img src="{ path to first logo }" alt="{ Alternate text for logo }" />
          </div>
          <div class="logo-slider-single">
               <img src="{ path to second logo }" alt="{ Alternate text for logo }" />
          </div>
          <div class="logo-slider-single">
               <img src="{ path to third logo }" alt="{ Alternate text for logo }" />
          </div>
     </div>
     <div class="logo-slider-inner">
          <div class="logo-slider-single">
               <img src="{ path to first logo }" alt="{ Alternate text for logo }" />
          </div>
          <div class="logo-slider-single">
               <img src="{ path to second logo }" alt="{ Alternate text for logo }" />
          </div>
          <div class="logo-slider-single">
               <img src="{ path to third logo }" alt="{ Alternate text for logo }" />
          </div>
     </div>
</div>

The CSS Styles and Animation

Once we add the above HTML markup, we’ll see all of the logos – but because there’s no CSS, they’d all be stacked one on top of the other.

So the first thing we need to do is make the div’s with logo-slider-inner and logo-slider-single classes inline-block elements so that the logos don’t stack.

.logo-slider {
     overflow: hidden;
     white-space: nowrap;
}

.logo-slider-inner, .logo-slider-single {
     display: inline-block;
}

.logo-slider-single {
     padding: 0 10px;
}

.logo-slider-single img {
     width: 100%;
     height: 80px;
     max-width: 240px;
     object-fit: contain;
}

In the above CSS, in addition to making the two div elements inline-block, we add white-space: nowrap and overflow:hidden to the parent container so that its children do not wrap to the next line and so the overflow is hidden on screen. We’ve also added 10px of padding on both sides of each logo.

For each logo, we’re setting its width to 100% and its height to 80px (you adjust accordingly). We’ll set a max-width of 240px for each logo and set the object-fit property to contain, which ensures that all logo sizes are similar.

Now, let’s use the CSS animation property to animate the logos and make everything look like a scroller.

We’ll first define a @keyframes rule with a name of logos-scroller. Inside the rule, we specify that the transform property’s translate value should be updated from 0 to -100% along the X-axis. Then, we bind the animation to the logo-slider-inner div using the CSS animation shorthand, specifying it to run for 25 seconds in an infinite loop and with a speed curve of linear.

(You’ll have to adjust the animation-duration property based on the number of logos you have in order to get a smooth scrolling effect.)

@keyframes logos-scroller {
     from {
          transform: translateX(0)
     }

     to {
          transform: translateX(-100%)
     }
}

.logo-slider-inner {
       animation: 25s logos-scroller infinite linear;
}

Once we have the above HTML and CSS on the page, we can observe the logos scroller on the page.

Here’s an example of this code working on the website of our partner OneCause:

By simply adding a few lines of CSS and utilizing the CSS3 animation property, we can create a scrolling slider that doesn’t need JavaScript, thus improving your website speed. If you need help implementing a scrolling slider on your website or for any other digital marketing needs, reach out to us.