Home
Juraj
Product Carousel with Tailwind CSS, Swiper & Alpine.js

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 CSS v3. It is responsive. similar terms for this example are Product Showcase, Product card

Carousel Product

Author Juraj

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

Next-Gen Hero Section – Tailwind CSS Component
A stunning, futuristic Hero Section built with Tailwind CSS, designed to capture user attention with glowing animations, smooth gradients, and bold typography. Perfect for modern web apps, education platforms like EduForce, landing pages, or portfolios. This component is responsive, interactive, and visually unique — not commonly found in typical UI libraries.

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

1.3k
Shopping Cart -Card

Author:
ABDO-SY

11 months ago

1.6k
Hero

Author:
ORGIN_DREAMS

8 months ago

1.2k
Food delivery ecommerce Card

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

1.8k
Card template

Author:
Raul antonio de la cruz hernandez

4 weeks ago

37
Responsive Image Carousel with Alpine.js
This component is a fully responsive image carousel/slider that displays: 1 slide at a time on mobile devices (screen width < 768px) 3 slides at a time on desktop (screen width ≥ 768px)

Author:
Salah eldein

3 months ago

265
Card Cartier Product
Card Based View of Cartier

Author:
Ameth Galarcio

11 months ago

855
Product Page
Showcase for the product.

Author:
muhamadrofii911

1 year ago

2.5k
Product Details Page
This section will show all the information about a selected product, including its title, description, price, images, and specifications.

Author:
mohit kulkarni

4 months ago

932
Total balance overview

Author:
Raul antonio de la cruz hernandez

2 months ago

341
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

9 months ago

1.4k
Tailwind image slider
slider with navigation buttons and info about image

Author:
Anonymous

2 years ago

20.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components