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

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

Image carousel
Uses Flowbite

Author:
Fagundo67

2 years ago

31.1k
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.9k
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

7 months ago

1.6k
Carousel

Author:
Crimson

11 months ago

6.5k
Image Carousel

Author:
Nikolai

1 year ago

6.8k
Our services
Component: Interactive Services Carousel Overview: A card-based carousel built with HTML5 and Tailwind CSS, powered by Vanilla JavaScript. It displays Adeoar's 6 main services with a responsive layout and smooth transitions. Technical Features: Responsive: Displays 3 columns on desktop (md breakpoint) and 1 column on mobile devices. Dependencies: Tailwind CSS (CDN or compiled) + Native JavaScript (no external libraries like Swiper or Slick required). Icons: Inline SVG icons (Heroicons style). Functionalities: Navigation: Side buttons (prev/next) and bottom pagination (indicator dots). Automation: Autoplay runs every 4 seconds (infinite loop logic). Interaction: Autoplay pauses automatically on mouse hover (mouseenter/mouseleave). Style & Design (UX/UI): Default State: White background, soft shadows, pastel-colored icon backgrounds. Hover State (Active): Zoom Effect: The card scales up (scale-105). Color Inversion: Background changes to Navy Blue (bg-blue-900) and text turns white for high contrast. Details: The icon background turns white, and the icon stroke takes the dark blue color.

Author:
Juan D. Cortorreal

1 month ago

178
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

1 year ago

2.1k
responsive slider carousel
slider carousel

Author:
Abhiraj

11 months ago

2.2k
Carousel

Author:
Juraj

10 months ago

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

Author:
Maxim

1 year ago

13k
Testimonials

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

8 months ago

1.6k
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 month ago

86

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components