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 651

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

Product grid

ariaw

11 months ago

837
Nice and simple carousel
Nice and simple carousel, fully responsive.

dev cheick

2 years ago

4.6k
PrimeCorp | Professional Business Solutions
We deliver cutting-edge business solutions through strategic consulting, tailored services, and continuous support. Partner with us to optimize operations, drive growth, and achieve sustainable success in today's competitive market.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.4k
Card-Product
Item or card to show products

Ameth Galarcio

2 years ago

5k
Image Carousel

Nikolai

2 years ago

8.1k
Card
amazing card

Cristian

1 year ago

2.5k
Product grid

ariaw

11 months ago

1.3k
Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

SHARIFUL ISLAM

1 year ago

2.8k
Product grid

ariaw

11 months ago

834
Card
travel place card hover effect card

nahid hasan

1 year ago

2.5k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

5 months ago

476
tinderclone By omerlinks
tinderclone By omerlinks

Omer fils ELENGA

9 months ago

636