Product Carousel with Tailwind CSS, Swiper & Alpine.js

A modern, responsive product carousel built with Tailwind CSS, Swiper, and Alpine.js.
The component features smooth sliding animations, autoplay, and custom navigation controls.
Each product card uses a flexible Tailwind layout and includes dynamically generated demo images, making it easy to drop into any landing page, marketing site, or product showcase.
Ideal for showcasing products in a clean, lightweight, and highly customizable way.

This tailwind example is contributed by Juraj, on 24-Jan-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Product Showcase, Product card

Carousel Product

Author Juraj

Tailwind v3.4 673

Fork Fullscreen

<section class="max-w-6xl mx-auto px-4 py-12">
  <div class="text-center mb-8">
    <h2 class="text-3xl font-extrabold text-slate-900">Product carousel</h2>
    <p class="mt-2 text-slate-600">Swiper with  Alpine JS.</p>
  </div>

<div class="pt-6">
                <a
                  :href="p.link"
                  class="group inline-flex items-center gap-2 font-bold text-sky-600 hover:text-indigo-700"
                >
                  <span>Learn more</span>
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"
                       class="stroke-sky-600 group-hover:stroke-indigo-700">
                    <path d="M5 10.707L10 5.70703L5 0.707031" stroke-width="2" />
                    <path d="M10 5.70703L0 5.70703" stroke-width="2" />
                  </svg>
                </a>
              </div>
            </article>
          </div>
        </template>
      </div>
    </div>

<div class="mt-10 flex justify-center gap-6">
      <button
        type="button"
        class="size-10 rounded-full text-sky-600 hover:text-indigo-700 transition-colors"
        @click="prev()"
        aria-label="Previous"
      >
        <svg width="40" height="40" viewBox="0 0 36 36" fill="none">
          <path d="M20 13L15 18L20 23" stroke="currentColor" stroke-width="2" />
          <circle cx="18" cy="18" r="17" stroke="currentColor" stroke-width="2" />
        </svg>
      </button>

// ✅ Produkty (vygenerované demo)
      products: [],

init() {
        this.products = this.makeProducts();

this.swiper = new Swiper(this.$refs.swiperEl, {
          loop: true,
          speed: 450,
          spaceBetween: 20,
          autoplay: {
            delay: 2200,
            disableOnInteraction: false,
          },
          breakpoints: {
            0: { slidesPerView: 1 },
            768: { slidesPerView: 2 },
            1024: { slidesPerView: 3 },
          },
        });
      },

prev() { this.swiper?.slidePrev(); },
      next() { this.swiper?.slideNext(); },

// --- “Generovanie” produktov + obrázkov (SVG data URI) ---
      makeProducts() {
        const items = [
          { id: 1, title: "Eco Bottle Pro", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut", link: "/products/eco-bottle" },
          { id: 2, title: "Smart Notes", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut", link: "/products/smart-notes" },
          { id: 3, title: "Desk Organizer", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut", link: "/products/desk-organizer" },
          { id: 4, title: "Travel Pack", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut", link: "/products/travel-pack" },
          { id: 5, title: "Focus Timer", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut", link: "/products/focus-timer" },
          { id: 6, title: "Cloud Backup Mini", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut", link: "/products/cloud-backup" },
        ];

// 6 rôznych “color themes”
        const colors = [
          ["#0ea5e9", "#1d4ed8"],
          ["#8b5cf6", "#1d4ed8"],
          ["#22c55e", "#0ea5e9"],
          ["#f97316", "#ef4444"],
          ["#14b8a6", "#0ea5e9"],
          ["#e11d48", "#8b5cf6"],
        ];

return items.map((it, idx) => ({
          ...it,
          image: this.svgDataUrl(it.title, colors[idx][0], colors[idx][1]),
        }));
      },

svgDataUrl(title, c1, c2) {
        const safeTitle = (title || "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
        const svg = `
          <svg xmlns="http://www.w3.org/2000/svg" width="800" height="400" viewBox="0 0 800 400">
            <defs>
              <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0" stop-color="${c1}"/>
                <stop offset="1" stop-color="${c2}"/>
              </linearGradient>
              <filter id="s" x="-20%" y="-20%" width="140%" height="140%">
                <feDropShadow dx="0" dy="10" stdDeviation="16" flood-color="#000" flood-opacity="0.25"/>
              </filter>
            </defs>
            <rect width="800" height="400" fill="url(#g)"/>
            <circle cx="640" cy="120" r="80" fill="rgba(255,255,255,0.18)"/>
            <circle cx="140" cy="300" r="120" fill="rgba(255,255,255,0.14)"/>
            <rect x="90" y="90" width="620" height="220" rx="28" fill="rgba(255,255,255,0.16)" filter="url(#s)"/>
            <text x="140" y="200" font-family="ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto"
                  font-size="44" font-weight="800" fill="white">${safeTitle}</text>
            <text x="140" y="248" font-family="ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto"
                  font-size="22" font-weight="600" fill="rgba(255,255,255,0.85)">Demo image (SVG)</text>
          </svg>
        `.trim();

// encode pre data URI
        return "data:image/svg+xml;charset=UTF-8," + encodeURIComponent(svg);
      },
    }
  }
</script>

Related Examples

Team Hero Section with Carousel
A clean and responsive hero section featuring an experts carousel built with Tailwind CSS, Swiper, and Alpine.js. The section highlights key experts with contact details and a clear call-to-action, making it ideal for landing pages and service-focused websites.

Juraj

9 months ago

522
Tailwind image slider
slider with navigation buttons and info about image

Anonymous

2 years ago

21.6k
Product card for eCommerce website

Steven Kuhn

4 years ago

13.3k
Testimonials

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.3k
Product cards
Product cards for eCommerce

ehmasuk

1 year ago

1.4k
Product grid

ariaw

1 year ago

919
omerlinkStream
omerlinkStream

Omer fils ELENGA

9 months ago

1.3k
Image Gallery Displayed in a Carousel
Trying to pick one scheme that displays on a varienty of background colors.

Sherry Lynne

2 months ago

152
Hero

ORGIN_DREAMS

1 year ago

2.2k
Our services
Component: Interactive Services Carousel Overview: A card-based carousel built with HTML5 and Tailwind CSS, powered by Vanilla JavaScript. It displays Adeoar's 6 main services with a responsive layout and smooth transitions. Technical Features: Responsive: Displays 3 columns on desktop (md breakpoint) and 1 column on mobile devices. Dependencies: Tailwind CSS (CDN or compiled) + Native JavaScript (no external libraries like Swiper or Slick required). Icons: Inline SVG icons (Heroicons style). Functionalities: Navigation: Side buttons (prev/next) and bottom pagination (indicator dots). Automation: Autoplay runs every 4 seconds (infinite loop logic). Interaction: Autoplay pauses automatically on mouse hover (mouseenter/mouseleave). Style & Design (UX/UI): Default State: White background, soft shadows, pastel-colored icon backgrounds. Hover State (Active): Zoom Effect: The card scales up (scale-105). Color Inversion: Background changes to Navy Blue (bg-blue-900) and text turns white for high contrast. Details: The icon background turns white, and the icon stroke takes the dark blue color.

Juan D. Cortorreal

11 months ago

1.2k
Product Page
Showcase for the product.

muhamadrofii911

2 years ago

3.1k
Card Product
Card Product for List Product

Ronny Camacho

10 months ago

952