Tailwind infnite logo Carousel

Important Notice

Width of the slide should be such that at any given point of time the number of slides seen should be very near to the half of total slides
Slide track width should be = width of 1 slide * total no of slides(original + duplicates )
Scroll animation translateX from 0px to (width of 1 slide * no of original slides )
If slides are more than or at least 10 then doubling the slides is enough
If slides are less than 5-8 then tripling them might work
Animation time is very important , exact no of total slides worked for me 😅

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Infnite logo loop tailwind</title>
<link
href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
rel="stylesheet"
/>
</head>

<body class="container mx-auto px-4 sm:px-12 py-8">
  <h1 class="text-center font-bold text-4xl tracking-wider">
    Infinite Scroll Carousel
  </h1>
<p class="text-center">Best suited for marquee of logos and small pictures</p>

<h1 class="mt-12 font-semibold mb-4 text-xl">1. Carousel with scroll and slide-track</h1>
  <div class="slider">
    <div class="slide-track">
      <div class="slide "><img style=" height:40px;" src="https://codewithabdul.site/dynamicimg/images/profile/1712734501.png" alt=""></div>
      <div class="slide "><img style=" height:40px;" src="https://codewithabdul.site/dynamicimg/images/profile/1712734501.png" alt=""></div>
      <div class="slide "><img style=" height:40px;" src="https://codewithabdul.site/dynamicimg/images/profile/1712734501.png" alt=""></div>
      <div class="slide "><img style=" height:40px;" src="https://codewithabdul.site/dynamicimg/images/profile/1712734501.png" alt=""></div>
      <div class="slide "><img style=" height:40px;" src="https://codewithabdul.site/dynamicimg/images/profile/1712734501.png" alt=""></div>
      <div class="slide "><img style=" height:40px;" src="https://codewithabdul.site/dynamicimg/images/profile/1712734501.png" alt=""></div>
      <div class="slide "><img style=" height:40px;" src="https://codewithabdul.site/dynamicimg/images/profile/1712734501.png" alt=""></div>
      <div class="slide "><img style=" height:40px;" src="https://codewithabdul.site/dynamicimg/images/profile/1712734501.png" alt=""></div>
      <div class="slide  text-white"><img style=" height:40px;" src="https://codewithabdul.site/dynamicimg/images/profile/1712734501.png" alt=""></div>
      <div class="slide "><img style=" height:40px;" src="https://codewithabdul.site/dynamicimg/images/profile/1712734501.png" alt=""></div>
      
      <div class="slide "><img style=" height:40px;" src="https://codewithabdul.site/dynamicimg/images/profile/1712734501.png" alt=""></div>
      <div class="slide "><img style=" height:40px;" src="https://codewithabdul.site/dynamicimg/images/profile/1712734501.png" alt=""></div>
      <div class="slide "><img style=" height:40px;" src="https://codewithabdul.site/dynamicimg/images/profile/1712734501.png" alt=""></div>
      <div class="slide "><img style=" height:40px;" src="https://codewithabdul.site/dynamicimg/images/profile/1712734501.png" alt=""></div>
      <div class="slide "><img style=" height:40px;" src="https://codewithabdul.site/dynamicimg/images/profile/1712734501.png" alt=""></div>
      <div class="slide "><img style=" height:40px;" src="https://codewithabdul.site/dynamicimg/images/profile/1712734501.png" alt=""></div>
      <div class="slide "><img style=" height:40px;" src="https://codewithabdul.site/dynamicimg/images/profile/1712734501.png" alt=""></div>
      <div class="slide "><img style=" height:40px;" src="https://codewithabdul.site/dynamicimg/images/profile/1712734501.png" alt=""></div>
      <div class="slide  text-white"><img style=" height:40px;" src="https://codewithabdul.site/dynamicimg/images/profile/1712734501.png" alt=""></div>
      <div class="slide "><img style=" height:40px;" src="https://codewithabdul.site/dynamicimg/images/profile/1712734501.png" alt=""></div>
    </div>
  </div>

<h1 class="mt-12 mb-4 font-semibold  text-xl">2. Carousel 2 with scroll2 and slide-track2</h1>
  <div class="slider">
    <div class="slide-track2">
      <div class="slide "><img style=" height:40px;" src="https://codewithabdul.site/dynamicimg/images/profile/1712734501.png" alt=""></div>
      <div class="slide "><img style=" height:40px;" src="https://codewithabdul.site/dynamicimg/images/profile/1712734501.png" alt=""></div>
      <div class="slide "><img style=" height:40px;" src="https://codewithabdul.site/dynamicimg/images/profile/1712734501.png" alt=""></div>
      <div class="slide "><img style=" height:40px;" src="https://codewithabdul.site/dynamicimg/images/profile/1712734501.png" alt=""></div>
      <div class="slide "><img style=" height:40px;" src="https://codewithabdul.site/dynamicimg/images/profile/1712734501.png" alt=""></div>

<div class="slide "><img style=" height:40px;" src="https://codewithabdul.site/dynamicimg/images/profile/1712734501.png" alt=""></div>
      <div class="slide "><img style=" height:40px;" src="https://codewithabdul.site/dynamicimg/images/profile/1712734501.png" alt=""></div>
      <div class="slide "><img style=" height:40px;" src="https://codewithabdul.site/dynamicimg/images/profile/1712734501.png" alt=""></div>
      <div class="slide "><img style=" height:40px;" src="https://codewithabdul.site/dynamicimg/images/profile/1712734501.png" alt=""></div>
      <div class="slide "><img style=" height:40px;" src="https://codewithabdul.site/dynamicimg/images/profile/1712734501.png" alt=""></div>
      
      <div class="slide "><img style=" height:40px;" src="https://codewithabdul.site/dynamicimg/images/profile/1712734501.png" alt=""></div>
      <div class="slide "><img style=" height:40px;" src="https://codewithabdul.site/dynamicimg/images/profile/1712734501.png" alt=""></div>
      <div class="slide "><img style=" height:40px;" src="https://codewithabdul.site/dynamicimg/images/profile/1712734501.png" alt=""></div>
      <div class="slide "><img style=" height:40px;" src="https://codewithabdul.site/dynamicimg/images/profile/1712734501.png" alt=""></div>
      <div class="slide "><img style=" height:40px;" src="https://codewithabdul.site/dynamicimg/images/profile/1712734501.png" alt=""></div>
    </div>
</div>
 <div class="mt-8">
    <ul>
        <li>free of use</li>
        <li>No attribution required</li>
    </ul>
 </div>
</body>
</html>

body {
  min-height: 100vh;
}
.slider {
  height: 60px;
  position: relative;
  width: 100%;

display: grid;
  place-items: center;
  overflow: hidden;
}
.slider::before,
.slider::after{
  position:absolute;
  background-image:linear-gradient(to right,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
  content:'';
  height:100%;width:25%;
  z-index:2;pointer-events:none;
}
.slider::before{
  left:0;
  top:0;
}
.slider::after{
  right:0;
  top:0;
  transform:rotateZ(180deg);
}

/*  IMPORTANT CODE BELOW */

.slide-track {
  width: calc(150px * 20);
  display: flex;
  animation: scroll 20s linear infinite;
  justify-content: space-between;
}

.slide-track2 {
  width: calc(150px * 15);
  display: flex;
  animation: scroll2 15s linear infinite;
  justify-content: space-between;
}

.slide {
  width: 150px;
  height: 60px;

display: grid;
  place-items: center;
  transition:0.5s;
  cursor:pointer;
}
.slide:hover{
  transform:scale(0.8)
}

@keyframes scroll {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(calc(-150px * 10));
  }
}

@keyframes scroll2 {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(calc(-150px * 5));
  }
}

@media screen and (max-width: 768px) {
  .slide-track {
    width: calc(80px * 20);
  }

.slide-track2 {
    width: calc(80px * 15);
  }

.slide {
    width: 80px;
  }

@keyframes scroll {
    0% {
      transform: translateX(0px);
    }
    100% {
      transform: translateX(calc(-80px * 10));
    }
  }

@keyframes scroll2 {
    0% {
      transform: translateX(0px);
    }
    100% {
      transform: translateX(calc(-80px * 5));
    }
  }
}

Socials

Recent Components

Ready to discuss your project requirements?

Get In Touch

Tailwind infnite logo Carousel

Important Notice

Socials

Recent Components

Pages

Ready to discuss your project requirements?