Home
dev cheick
Nice and simple carousel

Nice and simple carousel

Nice and simple carousel, fully responsive.

This tailwind example is contributed by dev cheick, on 11-Aug-2024. Component is made with Tailwind CSS v3. It is responsive.

Carousel

Author dev cheick

3.7k

Fork Fullscreen

<button
				class="absolute top-1/2 left-0 transform -translate-y-1/2 p-3 bg-gray-700 bg-opacity-50 rounded-full text-white hover:bg-opacity-75 focus:outline-none"
				onclick="scrollCarousel(-1)"
			>
				<svg
					class="w-6 h-6"
					fill="none"
					stroke="currentColor"
					viewBox="0 0 24 24"
					xmlns="http://www.w3.org/2000/svg"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M15 19l-7-7 7-7"
					></path>
				</svg>
			</button>
			<button
				class="absolute top-1/2 right-0 transform -translate-y-1/2 p-3 bg-gray-700 bg-opacity-50 rounded-full text-white hover:bg-opacity-75 focus:outline-none"
				onclick="scrollCarousel(1)"
			>
				<svg
					class="w-6 h-6"
					fill="none"
					stroke="currentColor"
					viewBox="0 0 24 24"
					xmlns="http://www.w3.org/2000/svg"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M9 5l7 7-7 7"
					></path>
				</svg>
			</button>
		</div>

function scrollCarousel(direction) {
				const carousel = document.getElementById("carousel");
				const totalSlides = carousel.children.length;
				currentIndex =
					(currentIndex + direction + totalSlides) % totalSlides;
				carousel.style.transform = `translateX(-${
					currentIndex * 100
				}%)`;
			}
		</script>
	</body>

Related Examples

Hero Slider with Alpine.js
This responsive hero slider features full-screen image backgrounds with elegant text overlays and smooth transitions.

Author:
Juraj

5 months ago

1.5k
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

1 week ago

29
Hero Section
Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

Author:
KULDEEP

4 months ago

1.2k
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:
Juraj

5 months ago

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

Author:
Anonymous

1 year ago

20.4k
carousel

Author:
Crimson

10 months ago

2.4k
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

1 week ago

19
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

3 weeks ago

393
Simple Animated Carousel
A simple, animated 2:1 carousel with touch swipe support, based on perky98/Juraj's carousel.

Author:
Nick Girga

6 months ago

877
Carousel

Author:
Juraj

9 months ago

2.1k
Image Carousel

Author:
Nikolai

1 year ago

6.8k
ArtoGallery
Explore a curated selection of contemporary and classic artwork, connecting collectors and creators in an inspiring online space.

Author:
ORGIN_DREAMS

5 months ago

922

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components