Home
Omer fils ELENGA
PlayStore Style Carousel

PlayStore Style Carousel

This tailwind example is contributed by Omer fils ELENGA, on 23-Jan-2026. Component is made with Tailwind CSS v3. It is responsive.

Card Carousel Range Slider

Author Omer fils ELENGA

Fork Fullscreen

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <title>Slider PlayStore Style</title>

<script src="https://cdn.tailwindcss.com"></script>

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

/* PlayStore-style continuous scrolling */
    .carousel-container {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      gap: 20px;
      padding: 20px;
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE/Edge */
    }

.carousel-container::-webkit-scrollbar {
      display: none; /* Chrome/Safari/Opera */
    }

.carousel-card {
      scroll-snap-align: start;
      flex: 0 0 calc(33.333% - 20px); /* 3 cards per view with gap */
      height: 400px;
      border-radius: 24px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

.carousel-card:hover {
      transform: scale(1.03);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
    }

/* Individual card animations */
    .card-content {
      animation: fadeInUp 0.6s ease-out;
    }

@keyframes fadeInUp {
      0% {
        opacity: 0;
        transform: translateY(20px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

/* Floating animation for elements */
    .floating-element {
      animation: float 6s ease-in-out infinite;
    }

@keyframes float {
      0% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
      100% { transform: translateY(0); }
    }

/* Continuous sliding animation */
    .continuous-slide {
      animation: continuousSlide 20s linear infinite;
    }

@keyframes continuousSlide {
      0% { transform: translateX(0); }
      100% { transform: translateX(-100%); }
    }
  </style>
</head>

<div class="w-full max-w-7xl mx-auto">
    <h1 class="text-3xl font-bold text-center text-white mb-8">PlayStore Style Carousel</h1>

<div class="relative overflow-hidden bg-gray-900 rounded-3xl p-8">
      <div class="carousel-container" id="carousel" x-data="{ currentIndex: 0 }">
        
        <div class="carousel-card bg-black p-8 flex flex-col justify-between">
          <div class="card-content">
            <h2 class="text-2xl font-bold text-white mb-4">Expressive API</h2>
            <p class="text-gray-300 mb-6">
              You don't need to be an expert to use our plugin.
              Our expressive API is readable and well documented.
            </p>
            <button class="mt-4 bg-white text-black px-6 py-3 rounded-full font-medium flex items-center gap-2 hover:bg-gray-200 transition">
              En savoir plus
              <span class="text-xl">↗</span>
            </button>
          </div>
          <div class="flex space-x-2">
            <div class="h-2 bg-gray-600 rounded-full flex-1"></div>
            <div class="h-2 bg-gray-600 rounded-full flex-1"></div>
            <div class="h-2 bg-gray-600 rounded-full flex-1 w-1/3"></div>
          </div>
        </div>

<div class="carousel-card bg-gradient-to-br from-blue-900 to-purple-900 p-8 flex flex-col justify-between">
          <div class="card-content">
            <h2 class="text-2xl font-bold text-white mb-4">UI Components</h2>
            <p class="text-gray-300 mb-6">
              Beautifully crafted UI components that integrate seamlessly
              with your existing workflow and enhance user experience.
            </p>
            <button class="mt-4 bg-white text-purple-900 px-6 py-3 rounded-full font-medium flex items-center gap-2 hover:bg-gray-200 transition">
              Découvrir
              <span class="text-xl">↗</span>
            </button>
          </div>
          <div class="flex space-x-2">
            <div class="h-2 bg-blue-400 rounded-full flex-1"></div>
            <div class="h-2 bg-purple-400 rounded-full flex-1"></div>
            <div class="h-2 bg-pink-400 rounded-full flex-1 w-1/3"></div>
          </div>
        </div>

<div class="carousel-card bg-gradient-to-br from-green-900 to-teal-900 p-8 flex flex-col justify-between">
          <div class="card-content">
            <h2 class="text-2xl font-bold text-white mb-4">Performance</h2>
            <p class="text-gray-300 mb-6">
              Optimized for speed and efficiency, ensuring your applications
              run smoothly even under heavy loads.
            </p>
            <button class="mt-4 bg-white text-teal-900 px-6 py-3 rounded-full font-medium flex items-center gap-2 hover:bg-gray-200 transition">
              Optimiser
              <span class="text-xl">↗</span>
            </button>
          </div>
          <div class="flex space-x-2">
            <div class="h-2 bg-green-400 rounded-full flex-1"></div>
            <div class="h-2 bg-teal-400 rounded-full flex-1"></div>
            <div class="h-2 bg-emerald-400 rounded-full flex-1 w-1/3"></div>
          </div>
        </div>

<div class="carousel-card bg-gradient-to-br from-yellow-900 to-orange-900 p-8 flex flex-col justify-between">
          <div class="card-content">
            <h2 class="text-2xl font-bold text-white mb-4">Security</h2>
            <p class="text-gray-300 mb-6">
              Advanced security features to protect your data and ensure
              privacy across all your applications and services.
            </p>
            <button class="mt-4 bg-white text-orange-900 px-6 py-3 rounded-full font-medium flex items-center gap-2 hover:bg-gray-200 transition">
              Sécuriser
              <span class="text-xl">↗</span>
            </button>
          </div>
          <div class="flex space-x-2">
            <div class="h-2 bg-yellow-400 rounded-full flex-1"></div>
            <div class="h-2 bg-orange-400 rounded-full flex-1"></div>
            <div class="h-2 bg-amber-400 rounded-full flex-1 w-1/3"></div>
          </div>
        </div>

<div class="carousel-card bg-gradient-to-br from-indigo-900 to-pink-900 p-8 flex flex-col justify-between">
          <div class="card-content">
            <h2 class="text-2xl font-bold text-white mb-4">Integration</h2>
            <p class="text-gray-300 mb-6">
              Seamless integration with popular platforms and services
              to enhance your workflow and productivity.
            </p>
            <button class="mt-4 bg-white text-pink-900 px-6 py-3 rounded-full font-medium flex items-center gap-2 hover:bg-gray-200 transition">
              Intégrer
              <span class="text-xl">↗</span>
            </button>
          </div>
          <div class="flex space-x-2">
            <div class="h-2 bg-indigo-400 rounded-full flex-1"></div>
            <div class="h-2 bg-purple-400 rounded-full flex-1"></div>
            <div class="h-2 bg-pink-400 rounded-full flex-1 w-1/3"></div>
          </div>
        </div>

<div class="carousel-card bg-gradient-to-br from-red-900 to-gray-900 p-8 flex flex-col justify-between">
          <div class="card-content">
            <h2 class="text-2xl font-bold text-white mb-4">Analytics</h2>
            <p class="text-gray-300 mb-6">
              Powerful analytics tools to track performance and gain insights
              to help you make informed decisions.
            </p>
            <button class="mt-4 bg-white text-gray-900 px-6 py-3 rounded-full font-medium flex items-center gap-2 hover:bg-gray-200 transition">
              Analyser
              <span class="text-xl">↗</span>
            </button>
          </div>
          <div class="flex space-x-2">
            <div class="h-2 bg-red-400 rounded-full flex-1"></div>
            <div class="h-2 bg-gray-400 rounded-full flex-1"></div>
            <div class="h-2 bg-slate-400 rounded-full flex-1 w-1/3"></div>
          </div>
        </div>

<div class="carousel-card bg-black p-8 flex flex-col justify-between">
          <div class="card-content">
            <h2 class="text-2xl font-bold text-white mb-4">Expressive API</h2>
            <p class="text-gray-300 mb-6">
              You don't need to be an expert to use our plugin.
              Our expressive API is readable and well documented.
            </p>
            <button class="mt-4 bg-white text-black px-6 py-3 rounded-full font-medium flex items-center gap-2 hover:bg-gray-200 transition">
              En savoir plus
              <span class="text-xl">↗</span>
            </button>
          </div>
          <div class="flex space-x-2">
            <div class="h-2 bg-gray-600 rounded-full flex-1"></div>
            <div class="h-2 bg-gray-600 rounded-full flex-1"></div>
            <div class="h-2 bg-gray-600 rounded-full flex-1 w-1/3"></div>
          </div>
        </div>

<div class="carousel-card bg-gradient-to-br from-blue-900 to-purple-900 p-8 flex flex-col justify-between">
          <div class="card-content">
            <h2 class="text-2xl font-bold text-white mb-4">UI Components</h2>
            <p class="text-gray-300 mb-6">
              Beautifully crafted UI components that integrate seamlessly
              with your existing workflow and enhance user experience.
            </p>
            <button class="mt-4 bg-white text-purple-900 px-6 py-3 rounded-full font-medium flex items-center gap-2 hover:bg-gray-200 transition">
              Découvrir
              <span class="text-xl">↗</span>
            </button>
          </div>
          <div class="flex space-x-2">
            <div class="h-2 bg-blue-400 rounded-full flex-1"></div>
            <div class="h-2 bg-purple-400 rounded-full flex-1"></div>
            <div class="h-2 bg-pink-400 rounded-full flex-1 w-1/3"></div>
          </div>
        </div>

<div class="carousel-card bg-gradient-to-br from-green-900 to-teal-900 p-8 flex flex-col justify-between">
          <div class="card-content">
            <h2 class="text-2xl font-bold text-white mb-4">Performance</h2>
            <p class="text-gray-300 mb-6">
              Optimized for speed and efficiency, ensuring your applications
              run smoothly even under heavy loads.
            </p>
            <button class="mt-4 bg-white text-teal-900 px-6 py-3 rounded-full font-medium flex items-center gap-2 hover:bg-gray-200 transition">
              Optimiser
              <span class="text-xl">↗</span>
            </button>
          </div>
          <div class="flex space-x-2">
            <div class="h-2 bg-green-400 rounded-full flex-1"></div>
            <div class="h-2 bg-teal-400 rounded-full flex-1"></div>
            <div class="h-2 bg-emerald-400 rounded-full flex-1 w-1/3"></div>
          </div>
        </div>
      </div>
    </div>

<div class="flex justify-center mt-6 space-x-4">
      <button id="prevBtn" class="bg-white text-gray-800 px-4 py-2 rounded-full font-medium hover:bg-gray-200 transition">
        ← Précédent
      </button>
      <button id="nextBtn" class="bg-white text-gray-800 px-4 py-2 rounded-full font-medium hover:bg-gray-200 transition">
        Suivant →
      </button>
    </div>
  </div>

// Auto-scroll functionality
      let scrollInterval = setInterval(() => {
        carousel.scrollBy({
          left: cardWidth,
          behavior: 'smooth'
        });

// Reset to start when reaching the end of unique cards
        setTimeout(() => {
          if (carousel.scrollLeft >= carousel.scrollWidth / 2) {
            carousel.scrollTo({
              left: 0,
              behavior: 'auto'
            });
          }
        }, 800);
      }, 3000);

// Pause auto-scroll when hovering over carousel
      carousel.addEventListener('mouseenter', () => {
        clearInterval(scrollInterval);
      });

carousel.addEventListener('mouseleave', () => {
        scrollInterval = setInterval(() => {
          carousel.scrollBy({
            left: cardWidth,
            behavior: 'smooth'
          });

// Reset to start when reaching the end of unique cards
          setTimeout(() => {
            if (carousel.scrollLeft >= carousel.scrollWidth / 2) {
              carousel.scrollTo({
                left: 0,
                behavior: 'auto'
              });
            }
          }, 800);
        }, 3000);
      });

// Manual navigation
      nextBtn.addEventListener('click', () => {
        carousel.scrollBy({
          left: cardWidth,
          behavior: 'smooth'
        });
      });

prevBtn.addEventListener('click', () => {
        carousel.scrollBy({
          left: -cardWidth,
          behavior: 'smooth'
        });
      });
    });
  </script>
</body>
</html>

Related Examples