Infinite Logo Slider Loop

by Dhruvang Gajjar

HTML

<div class="jsx-1777228610 slider-container">
  <div class="jsx-1777228610 slider-content-wrapper">
    <div class="jsx-1777228610">
      <div class="jsx-3261677893 company-logos-container">
        <div class="jsx-3261677893"><svg width="328px" height="40px" viewBox="0 0 328 40" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill-rule="nonzero" stroke="none" stroke-width="1" fill="none"><path d="M31.6 19.9c0 2.4-.7 4.7-1.9 6.6l4.9 4.9c2.4-3.2 3.9-7.2 3.9-11.5S37 11.6 34.6 8.4l-4.9 4.9c1.2 1.9 1.9 4.1 1.9 6.6z" fill="#9B9B9B"></path><path d="M19.4 32.1c-6.7 0-12.2-5.5-12.2-12.2 0-6.7 5.5-12.2 12.2-12.2 2.5 0 4.7.7 6.6 2l4.9-4.9C27.7 2.4 23.7.9 19.4.9 8.9.9.3 9.4.3 20c0 10.6 8.6 19 19.1 19 4.4 0 8.4-1.5 11.6-3.9l-4.9-4.9c-1.9 1.2-4.2 1.9-6.7 1.9z" fill="#000"></path><g transform="translate(54.000000, 0.000000)" fill="#000"><path d="M263.34 26.858a6.818 6.818 0 0 1-5.15-2.288c-.072-.141-.072-.284.07-.356l12.018-5.072 3.509-1.499c.14-.072.14-.144.14-.214-1.143-4.928-5.65-8.571-10.943-8.357-5.583.214-10.233 4.714-10.447 10.285a10.828 10.828 0 0 0 2.996 8.01 10.86 10.86 0 0 0 7.879 3.347c4.507 0 8.369-2.784 10.014-6.714.072-.144 0-.288-.144-.288l-3.504-.64c-.07 0-.215 0-.215.144-1.287 2.14-3.576 3.642-6.223 3.642zm0-13.856a6.766 6.766 0 0 1 5.151 2.355c.07.144.07.288-.072.357 0 0-11.59 4.93-11.732 5.001-.144.072-.289-.07-.289-.144V20c-.069-3.928 3.077-7 6.942-7v.002zm-11.303-3.573h-3.434c-.072 0-.144.072-.215.144l-5.58 16.355c-.143.358-.571.358-.714 0l-5.58-16.357c0-.072-.073-.144-.215-.144h-3.434c-.144 0-.215.144-.215.288l7.082 20.571c0 .07.07.141.213.141h4.865c.07 0 .141-.072.213-.144l7.083-20.571c.144-.14.07-.283-.072-.283h.003zm-22.606 0h-3.506c-.144 0-.215.072-.215.214v20.571c0 .144.072.215.215.215h3.506c.144 0 .213-.072.213-.215V9.644c0-.073-.07-.215-.213-.215zm0-6.715h-3.506c-.144 0-.215.072-.215.214v3.5c0 .145.072.215.215.215h3.506c.144 0 .213-.072.213-.214V2.928c0-.144-.07-.214-.213-.214zm-7.227 6.715h-3.933a.154.154 0 0...

CSS

.slider-container.jsx-1777228610 {
  overflow: hidden;
  white-space: nowrap;
  width:400px;
}

.slider-content-wrapper.jsx-1777228610 {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  -webkit-animation: slide-jsx-1777228610 80s linear infinite;
  animation: slide-jsx-1777228610 80s linear infinite;
}

.slider-content-wrapper.jsx-1777228610>div.jsx-1777228610 {
  display: inline-block;
}

.slider-content-wrapper.jsx-1777228610>div.jsx-1777228610 {
  display: inline-block;
}

.company-logos-container.jsx-3261677893 {
  white-space: nowrap;
  overflow: hidden;
}

.company-logos-container.jsx-3261677893>div.jsx-3261677893 {
  display: inline-block;
  padding: 0 2.2rem;
  vertical-align: middle;
  opacity: .25;
  outline: none;
  cursor: default;
  -webkit-transition: opacity .2s ease;
  transition: opacity .2s ease;
}

@-webkit-keyframes slide-jsx-1777228610 {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-50%, 0, 0);
    -ms-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
}