Home
Maxim
Carousel Card Slider Swiper on Alpine.JS

10

Carousel Card Slider Swiper on Alpine.JS

with support drag and drop mouse actions

This tailwind example is contributed by Maxim, on 06-Apr-2024. Component is made with Tailwind CSS v3. It is responsive.

Card Carousel

Author Maxim

10.8k

12

Fork Fullscreen

<script src="https://cdn.jsdelivr.net/npm/tailwindcss-cdn@3.4.1/tailwindcss.js"></script>
<script src="//unpkg.com/alpinejs" defer></script>
<div x-data="swipeCards()" x-init="
			let isDown = false;
			let startX;
			let scrollLeft;
			$el.addEventListener('mousedown', (e) => {
			isDown = true;
			startX = e.pageX - $el.offsetLeft;
			scrollLeft = $el.scrollLeft;
			});
			$el.addEventListener('mouseleave', () => {
			isDown = false;
			});
			$el.addEventListener('mouseup', () => {
			isDown = false;
			});
			$el.addEventListener('mousemove', (e) => {
			if (!isDown) return;
			e.preventDefault();
			const x = e.pageX - $el.offsetLeft;
			const walk = (x - startX) * 1;
			$el.scrollLeft = scrollLeft - walk;
			});
			" class="overflow-x-scroll scrollbar-hide mb-4 relative px-0.5" style="overflow-y: hidden;">
	<div class="flex snap-x snap-mandatory gap-4" style="width: max-content;">
		<template x-for="card in cards" :key="card.id">
			<div class="flex-none w-64 snap-center">
				<div class="bg-white border-1 border border-gray-200 rounded-lg overflow-hidden mb-4">
					<img :src="card.image" alt="" class="w-full h-40 object-cover">
					<div class="p-4">
						<h3 class="text-lg leading-6 font-bold text-gray-900" x-text="card.title"></h3>
						<p class="text-gray-600 mt-2 text-sm" x-text="card.description"></p>
						<div class="flex justify-between items-center mt-4">
							<span class="text-2xl font-extrabold text-gray-900" x-text="'$' + card.price.toFixed(2)"></span>
							<a :href="card.link"
								class="text-white bg-fuchsia-950 hover:bg-fuchsia-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center"><svg
									xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
									stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
									<path stroke-linecap="round" stroke-linejoin="round"
										d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
								</svg></a>
						</div>
					</div>
				</div>
			</div>
		</template>
	</div>
</div>
<script>
	function swipeCards() {
			  return {
			    cards: [
			      {
			        id: 1,
			        image: `https://loremflickr.com/300/200/${encodeURIComponent('grape')}`,
			        title: 'Cocktail',
			        description: 'Tropical mix of flavors, perfect for parties.',
			        price: 8.99,
			        link: 'https://lqrs.com'
			      },
			      {
			        id: 2,
			        image: `https://loremflickr.com/300/200/${encodeURIComponent('apple')}`,
			        title: 'Smoothie',
			        description: 'Refreshing blend of fruits and yogurt.',
			        price: 5.49,
			        link: 'https://lqrs.com'
			      },
			      {
			        id: 3,
			        image: `https://loremflickr.com/300/200/${encodeURIComponent('banana')}`,
			        title: 'Iced Coffee',
			        description: 'Cold brewed coffee with a hint of vanilla.',
			        price: 4.99,
			        link: 'https://lqrs.com'
			      },
			      {
			        id: 4,
			        image: `https://loremflickr.com/300/200/${encodeURIComponent('berry')}`,
			        title: 'Mojito',
			        description: 'Classic Cuban cocktail with mint and lime.',
			        price: 7.99,
			        link: 'https://lqrs.com'
			      },
			      {
			        id: 5,
			        image: `https://loremflickr.com/300/200/${encodeURIComponent('orange')}`,
			        title: 'Matcha Latte',
			        description: 'Creamy green tea latte, rich in antioxidants.',
			        price: 6.49,
			        link: 'https://lqrs.com'
			      },
			      {
			        id: 6,
			        image: `https://loremflickr.com/300/200/${encodeURIComponent('peach')}`,
			        title: 'Fruit Punch',
			        description: 'Sweet and tangy punch, bursting with fruity flavors.',
			        price: 3.99,
			        link: 'https://lqrs.com'
			      },
			      {
			        id: 7,
			        image: `https://loremflickr.com/300/200/${encodeURIComponent('cherry')}`,
			        title: 'Bubble Tea',
			        description: 'Chewy tapioca pearls in a sweet milk tea base.',
			        price: 4.99,
			        link: 'https://lqrs.com'
			      }
			    ],
			    addToCart(product) {
			      // Implement your add to cart logic here
			      console.log('Adding to cart:', product);
			    }
			  };
			}
</script>

Related Examples

Carousel with Tailwind CSS and Alpine.js
Simple card Carousel

Author:
Brandon D

2 years ago

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

Author:
Anonymous

1 year ago

19k
Image carousel
Uses Flowbite

Author:
Fagundo67

2 years ago

28k
3 columns blog section
de columnis, columni, 3 columns

Author:
Anonymous

1 year ago

10.5k
Image Carousel

Author:
Nikolai

1 year ago

5.7k
Card grid section
Display article/blog grid

Author:
Mr Robot

2 years ago

25.5k
Testimonials

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

1 month ago

634
Card Item Financieros
Item Financiero

Author:
Ameth Galarcio

10 months ago

1.3k
User profile card with Cover Image

Author:
Noob

2 years ago

27.9k
Labs card
Lab item list card

Author:
Sedat Kumcu

6 months ago

1.2k
Product card for e-commerce
A responsive product card for e-commerce, displaying product image, country flag, volume, name, and price, with hover effects and a clean layout.

Author:
Maxim

5 months ago

741
Admin dashboard cards
Card groups for showing stats/info.

Author:
Gopi Yadav

2 years ago

19k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1