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

2.1k

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

Tailwind image slider
slider with navigation buttons and info about image

Author:
Anonymous

1 year ago

17.9k
Carousel

Author:
Crimson

1 month ago

1k
carousel

Author:
Crimson

1 month ago

597
How to create a carousel with Tailwind CSS and Alpinejs
How to create a carousel with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

9 months ago

2.4k
Simple Multi-Purpose Slider
This is a very minimalistic though very usable slider for various situations like CTA's, quotes or other uncomplicated content. I only used Tailwindcss which makes it very lightweight, but due to limitations it's not as flexible as I wished for. This could be easily achieved by a little piece of JS to make it as dynamic as you wish.

Author:
Hielke Brandsma

3 months ago

1k
Carousel with Tailwind CSS and Alpine.js
Simple card Carousel

Author:
Brandon D

2 years ago

28.1k
Image carousel
Uses Flowbite

Author:
Anonymous

2 months ago

1.3k
Custom Carosel

Author:
Md. Tofayel islam

5 months ago

1.4k
Slider
Responsive slider

Author:
Abhiraj

4 weeks ago

265
Image carousel
Uses Flowbite

Author:
Fagundo67

2 years ago

26.5k
Carousel

Author:
Juraj

1 week ago

54
Carousel Card Slider Swiper on Alpine.JS
with support drag and drop mouse actions

Author:
Maxim

10 months ago

9.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components