Home
Crimson
carousel

carousel

This tailwind example is contributed by Crimson, on 14-Jan-2025. Component is made with Tailwind CSS v3. It is responsive.

Carousel

Author Crimson

2.2k

Fork Fullscreen

@keyframes textReveal {
            from {
                transform: translateY(100%);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

@keyframes float {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }

@keyframes shine {
            from {
                transform: translateX(-100%) rotate(45deg);
            }
            to {
                transform: translateX(200%) rotate(45deg);
            }
        }

.shine-effect::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.2),
                transparent
            );
            transform: translateX(-100%) rotate(45deg);
        }

.shine-effect:hover::before {
            animation: shine 1.5s;
        }

.float-animation {
            animation: float 6s ease-in-out infinite;
        }

.split-reveal {
            animation: reveal 1.2s cubic-bezier(0.77, 0, 0.175, 1);
        }

.text-reveal {
            animation: textReveal 0.8s cubic-bezier(0.77, 0, 0.175, 1);
        }

.scroll-container {
            scroll-snap-type: y mandatory;
            -webkit-overflow-scrolling: touch;
        }

.scroll-section {
            scroll-snap-align: start;
            scroll-snap-stop: always;
        }

.content-mask {
            -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
            mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
        }
    </style>
</head>
<body class="bg-neutral-950 text-white overflow-hidden">
    
    <div class="scroll-container h-screen overflow-y-auto overflow-x-hidden">
        
        <section class="scroll-section relative h-screen flex flex-col md:flex-row">
            
            <div class="w-full md:w-1/2 h-1/2 md:h-full relative overflow-hidden group shine-effect">
                <img src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" 
                     alt="Architectural detail" 
                     class="absolute inset-0 w-full h-full object-cover transition-all duration-1000 group-hover:scale-110 group-hover:rotate-1" />
                <div class="absolute inset-0 bg-gradient-to-r from-neutral-950/70 to-neutral-950/50 transition-opacity duration-500 group-hover:opacity-0"></div>
            </div>
            
            <div class="w-full md:w-1/2 h-1/2 md:h-full flex items-center justify-center p-8 bg-neutral-950">
                <div class="max-w-lg float-animation">
                    <span class="text-neutral-400 tracking-wider text-sm font-mono">01 / VISION</span>
                    <h2 class="mt-4 text-5xl md:text-7xl font-bold leading-none bg-gradient-to-r from-white to-neutral-400 bg-clip-text text-transparent">Modern Architecture</h2>
                    <p class="mt-6 text-neutral-400 text-lg leading-relaxed">Exploring the intersection of form and function in contemporary design.</p>
                    <button class="mt-8 px-6 py-3 bg-white/10 hover:bg-white/20 rounded-full text-sm font-medium transition-all duration-300 hover:tracking-wider">Explore More →</button>
                </div>
            </div>
        </section>

<section class="scroll-section relative h-screen flex flex-col md:flex-row">
            
            <div class="w-full md:w-1/2 h-1/2 md:h-full flex items-center justify-center p-8 bg-neutral-900">
                <div class="max-w-lg float-animation">
                    <span class="text-neutral-400 tracking-wider text-sm font-mono">02 / DESIGN</span>
                    <h2 class="mt-4 text-5xl md:text-7xl font-bold leading-none bg-gradient-to-r from-white to-neutral-400 bg-clip-text text-transparent">Urban Spaces</h2>
                    <p class="mt-6 text-neutral-400 text-lg leading-relaxed">Creating environments that inspire and transform daily life.</p>
                    <button class="mt-8 px-6 py-3 bg-white/10 hover:bg-white/20 rounded-full text-sm font-medium transition-all duration-300 hover:tracking-wider">Learn More →</button>
                </div>
            </div>
            
            <div class="w-full md:w-1/2 h-1/2 md:h-full relative overflow-hidden group shine-effect">
                <img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab" 
                     alt="Urban landscape" 
                     class="absolute inset-0 w-full h-full object-cover transition-all duration-1000 group-hover:scale-110 group-hover:rotate-1" />
                <div class="absolute inset-0 bg-gradient-to-l from-neutral-950/70 to-neutral-950/50 transition-opacity duration-500 group-hover:opacity-0"></div>
            </div>
        </section>

<section class="scroll-section relative h-screen flex flex-col md:flex-row">
            
            <div class="w-full md:w-1/2 h-1/2 md:h-full relative overflow-hidden group shine-effect">
                <img src="https://images.unsplash.com/photo-1682687220067-dced0a5865c5" 
                     alt="Minimalist interior" 
                     class="absolute inset-0 w-full h-full object-cover transition-all duration-1000 group-hover:scale-110 group-hover:rotate-1" />
                <div class="absolute inset-0 bg-gradient-to-r from-neutral-950/70 to-neutral-950/50 transition-opacity duration-500 group-hover:opacity-0"></div>
            </div>
            
            <div class="w-full md:w-1/2 h-1/2 md:h-full flex items-center justify-center p-8 bg-neutral-950">
                <div class="max-w-lg float-animation">
                    <span class="text-neutral-400 tracking-wider text-sm font-mono">03 / SPACE</span>
                    <h2 class="mt-4 text-5xl md:text-7xl font-bold leading-none bg-gradient-to-r from-white to-neutral-400 bg-clip-text text-transparent">Interior Flow</h2>
                    <p class="mt-6 text-neutral-400 text-lg leading-relaxed">Harmonizing space and light to create immersive experiences.</p>
                    <button class="mt-8 px-6 py-3 bg-white/10 hover:bg-white/20 rounded-full text-sm font-medium transition-all duration-300 hover:tracking-wider">Discover More →</button>
                </div>
            </div>
        </section>

<div class="fixed right-8 top-1/2 -translate-y-1/2 flex flex-col gap-4 z-50">
            <button onclick="scrollToSection(0)" class="w-3 h-3 rounded-full bg-white/20 hover:bg-white transition-colors hover:scale-150" title="Go to section 1"></button>
            <button onclick="scrollToSection(1)" class="w-3 h-3 rounded-full bg-white/20 hover:bg-white transition-colors hover:scale-150" title="Go to section 2"></button>
            <button onclick="scrollToSection(2)" class="w-3 h-3 rounded-full bg-white/20 hover:bg-white transition-colors hover:scale-150" title="Go to section 3"></button>
        </div>
    </div>

function updateDots(index) {
            dots.forEach((dot, i) => {
                dot.className = `w-3 h-3 rounded-full transition-all duration-300 ${
                    i === index ? 'bg-white scale-150' : 'bg-white/20 hover:bg-white hover:scale-150'
                }`;
            });
        }

// Update dots on scroll
        container.addEventListener('scroll', () => {
            const index = Math.round(container.scrollTop / window.innerHeight);
            updateDots(index);
        });

// Initialize first dot
        updateDots(0);
    </script>
</body>
</html>

Related Examples

Carousel with Tailwind CSS and Alpine.js
Simple card Carousel

Author:
Brandon D

3 years ago

30.9k
Slider
Responsive slider

Author:
Abhiraj

7 months ago

1.9k
Nice and simple carousel
Nice and simple carousel, fully responsive.

Author:
dev cheick

1 year ago

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

Author:
Juraj

4 months ago

1.2k
3D Animated Image Gallery
3D Animated Image Gallery

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

1 year ago

8.2k
Image Carousel

Author:
Nikolai

1 year ago

6.5k
Carousel

Author:
Juraj

7 months ago

1.6k
Carousel

Author:
Crimson

8 months ago

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

10 months ago

1.8k
Testimonials

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

5 months ago

1.3k
Image carousel
Uses Flowbite

Author:
Fagundo67

2 years ago

30k
How to create a carousel with Tailwind CSS and Alpinejs
How to create a carousel with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

3.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components