Web Development & WordPress

Pure CSS Infinite Logo Slider (No JavaScript) – Works in HTML & WordPress

allaboutbasic
css slider for html or wordpress site

if you’re looking for a lightweight, fast, and JavaScript-free logo slider, you’re in the right place. Here I am sharing how to create a smooth infinite scrolling CSS slider using only HTML and CSS—perfect for:

  • Static HTML websites
  • WordPress (Elementor, Gutenberg, Custom HTML block)
  • Landing pages
  • Client logo sections
  • Brand partner showcases

No jQuery. No plugins. No external libraries.

Here is the CSS and HTML which you can use

/* Slider Container */
.rbb-slick-carousel {
  width: 100%;
  padding: 20px 0;
}

/* Viewport */
.rbb-slick-carousel .slick-list {
  overflow: hidden;
  width: 100%;
}

/*  Track Moving */
.rbb-slick-carousel .slick-track {
  display: flex !important;
  align-items: center;
  width: max-content;
  animation: rbb-scroll 30s linear infinite;
  will-change: transform;
}

/* Individual Logo Boxes */
.logo-item {
  width: 180px;
  margin: 0 20px;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

.logo-item img {
  width: 100%;
  height: 60px;
  object-fit: contain;
}

/*  Keyframe Animation */
@keyframes rbb-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

HTML ( just you need to replace the logo image urls with your own logo images)

<div class="rbb-slick-carousel">
  <div class="slick-list">
    <div class="slick-track">

      <!--  8 LOGOS -->
      <div class="logo-item"><img src="https://dummyimage.com/200x80/000/fff&text=Logo+1"></div>
      <div class="logo-item"><img src="https://dummyimage.com/200x80/333/fff&text=Logo+2"></div>
      <div class="logo-item"><img src="https://dummyimage.com/200x80/555/fff&text=Logo+3"></div>
      <div class="logo-item"><img src="https://dummyimage.com/200x80/777/fff&text=Logo+4"></div>
      <div class="logo-item"><img src="https://dummyimage.com/200x80/999/fff&text=Logo+5"></div>
      <div class="logo-item"><img src="https://dummyimage.com/200x80/111/fff&text=Logo+6"></div>
      <div class="logo-item"><img src="https://dummyimage.com/200x80/222/fff&text=Logo+7"></div>
      <div class="logo-item"><img src="https://dummyimage.com/200x80/444/fff&text=Logo+8"></div>

      <!-- DUPLICATE FOR SMOOTH LOOP -->
      <div class="logo-item"><img src="https://dummyimage.com/200x80/000/fff&text=Logo+1"></div>
      <div class="logo-item"><img src="https://dummyimage.com/200x80/333/fff&text=Logo+2"></div>
      <div class="logo-item"><img src="https://dummyimage.com/200x80/555/fff&text=Logo+3"></div>
      <div class="logo-item"><img src="https://dummyimage.com/200x80/777/fff&text=Logo+4"></div>
      <div class="logo-item"><img src="https://dummyimage.com/200x80/999/fff&text=Logo+5"></div>
      <div class="logo-item"><img src="https://dummyimage.com/200x80/111/fff&text=Logo+6"></div>
      <div class="logo-item"><img src="https://dummyimage.com/200x80/222/fff&text=Logo+7"></div>
      <div class="logo-item"><img src="https://dummyimage.com/200x80/444/fff&text=Logo+8"></div>

    </div>
  </div>
</div>

How to Control Speed

Change 30s to your preferable amount of seconds in the css 

animation: rbb-scroll 30s linear infinite;

Works Perfectly in WordPress

You can use it inside:

  • Elementor → HTML widget
  • Gutenberg → Custom HTML block
  • Classic Editor → Text tab
  • Any page builder

No plugin is required.

Leave a comment