Home
Maxim
Card Slider

Card Slider

This tailwind example is contributed by Maxim, on 20-Mar-2025. Component is made with Tailwind CSS v3. It is responsive.

Card Range Slider

Author Maxim

1.7k

Fork Fullscreen

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Kart Galerisi</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
        
        body {
            font-family: 'Poppins', sans-serif;
            background-color: #f8f9ff;
        }
        
        .card {
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            overflow: hidden;
            border-radius: 15px;
        }
        
        .card:hover {
            transform: translateY(-12px);
            box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
        }
        
        .card-image {
            transition: transform 0.8s;
        }
        
        .card:hover .card-image {
            transform: scale(1.05);
        }
        
        .card-overlay {
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
        }
        
        .slider-container {
            scroll-behavior: smooth;
        }
        
        .nav-button {
            transition: all 0.3s;
            opacity: 0.9;
        }
        
        .nav-button:hover {
            transform: scale(1.1);
            opacity: 1;
        }
        
        .badge {
            position: absolute;
            top: 1rem;
            right: 1rem;
            padding: 0.25rem 0.75rem;
            border-radius: 50px;
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }
        
        .feature-card {
            transition: all 0.3s ease;
            border-radius: 16px;
            overflow: hidden;
        }
        
        .feature-card:hover {
            transform: translateY(-8px);
        }
        
        .feature-icon {
            transition: all 0.3s ease;
        }
        
        .feature-card:hover .feature-icon {
            transform: scale(1.15);
        }
        
        .hide-scrollbar::-webkit-scrollbar {
            display: none;
        }
        
        .hide-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        
        .gradient-text {
            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .blur-backdrop {
            backdrop-filter: blur(8px);
            background-color: rgba(255, 255, 255, 0.8);
        }
    </style>
</head>
<body class="min-h-screen py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-6xl mx-auto">
        
        <div class="text-center mb-16 animate__animated animate__fadeIn">
            <h1 class="text-4xl font-bold sm:text-5xl lg:text-6xl mb-4">
                <span class="gradient-text">Modern Galeri</span>
            </h1>
            <p class="mt-5 max-w-xl mx-auto text-xl text-gray-600">
                Tailwind CSS ile oluşturulmuş zarif ve etkileşimli içerik sliderı
            </p>
            <div class="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto mt-6 rounded-full"></div>
        </div>

<div class="relative mb-24">
            
            <div class="flex justify-between absolute inset-0 items-center z-10 px-4 pointer-events-none">
                <button id="prev-btn" class="nav-button bg-white p-3 rounded-full shadow-lg text-gray-800 pointer-events-auto focus:outline-none hover:bg-gray-50 transform transition">
                    <i class="fas fa-chevron-left"></i>
                </button>
                <button id="next-btn" class="nav-button bg-white p-3 rounded-full shadow-lg text-gray-800 pointer-events-auto focus:outline-none hover:bg-gray-50 transform transition">
                    <i class="fas fa-chevron-right"></i>
                </button>
            </div>

<div id="slider" class="slider-container flex overflow-x-auto hide-scrollbar py-8 snap-x snap-mandatory">
                <div class="flex space-x-6 px-4">
                    
                    <div class="card flex-none w-80 bg-white shadow-lg snap-center">
                        <div class="relative h-56 overflow-hidden">
                            <div class="absolute inset-0 bg-gradient-to-r from-blue-500 to-indigo-600 flex items-center justify-center">
                                <i class="fas fa-laptop-code text-white text-5xl card-image"></i>
                            </div>
                            <div class="absolute inset-0 card-overlay flex flex-col justify-end p-6 text-white">
                                <h3 class="font-bold text-xl">Teknoloji</h3>
                                <p class="text-sm text-gray-200 mt-1">Yenilikçi teknolojilerle geleceği şekillendirin</p>
                            </div>
                            <span class="badge bg-green-500 text-white">Yeni</span>
                        </div>
                        <div class="p-6">
                            <p class="text-gray-600 mb-4">Modern web teknolojileri ve yazılım geliştirme araçları ile projelerinizi hayata geçirin.</p>
                            <button class="w-full bg-gradient-to-r from-blue-500 to-indigo-600 text-white px-4 py-2.5 rounded-lg hover:opacity-90 transition flex items-center justify-center">
                                <span>Keşfet</span>
                                <i class="fas fa-arrow-right ml-2"></i>
                            </button>
                        </div>
                    </div>

<div class="card flex-none w-80 bg-white shadow-lg snap-center">
                        <div class="relative h-56 overflow-hidden">
                            <div class="absolute inset-0 bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center">
                                <i class="fas fa-comments text-white text-5xl card-image"></i>
                            </div>
                            <div class="absolute inset-0 card-overlay flex flex-col justify-end p-6 text-white">
                                <h3 class="font-bold text-xl">İletişim</h3>
                                <p class="text-sm text-gray-200 mt-1">Etkili iletişim stratejileri</p>
                            </div>
                        </div>
                        <div class="p-6">
                            <p class="text-gray-600 mb-4">Ekip içi iletişim ve müşteri ilişkilerinde başarılı olmak için gerekli tüm bilgiler.</p>
                            <button class="w-full bg-gradient-to-r from-purple-500 to-pink-500 text-white px-4 py-2.5 rounded-lg hover:opacity-90 transition flex items-center justify-center">
                                <span>Keşfet</span>
                                <i class="fas fa-arrow-right ml-2"></i>
                            </button>
                        </div>
                    </div>

<div class="card flex-none w-80 bg-white shadow-lg snap-center">
                        <div class="relative h-56 overflow-hidden">
                            <div class="absolute inset-0 bg-gradient-to-r from-pink-500 to-red-500 flex items-center justify-center">
                                <i class="fas fa-book-open text-white text-5xl card-image"></i>
                            </div>
                            <div class="absolute inset-0 card-overlay flex flex-col justify-end p-6 text-white">
                                <h3 class="font-bold text-xl">Eğitim</h3>
                                <p class="text-sm text-gray-200 mt-1">Sürekli öğrenme ve gelişme</p>
                            </div>
                            <span class="badge bg-yellow-500 text-white">Popüler</span>
                        </div>
                        <div class="p-6">
                            <p class="text-gray-600 mb-4">Kariyer gelişiminiz için önemli becerileri öğrenin ve kendinizi sürekli geliştirin.</p>
                            <button class="w-full bg-gradient-to-r from-pink-500 to-red-500 text-white px-4 py-2.5 rounded-lg hover:opacity-90 transition flex items-center justify-center">
                                <span>Keşfet</span>
                                <i class="fas fa-arrow-right ml-2"></i>
                            </button>
                        </div>
                    </div>

<div class="card flex-none w-80 bg-white shadow-lg snap-center">
                        <div class="relative h-56 overflow-hidden">
                            <div class="absolute inset-0 bg-gradient-to-r from-green-500 to-teal-500 flex items-center justify-center">
                                <i class="fas fa-chart-pie text-white text-5xl card-image"></i>
                            </div>
                            <div class="absolute inset-0 card-overlay flex flex-col justify-end p-6 text-white">
                                <h3 class="font-bold text-xl">Analitik</h3>
                                <p class="text-sm text-gray-200 mt-1">Veri analizi ve iç görüler</p>
                            </div>
                        </div>
                        <div class="p-6">
                            <p class="text-gray-600 mb-4">Verileri analiz edin ve işletmeniz için akıllı kararlar alın. Geleceği öngörün.</p>
                            <button class="w-full bg-gradient-to-r from-green-500 to-teal-500 text-white px-4 py-2.5 rounded-lg hover:opacity-90 transition flex items-center justify-center">
                                <span>Keşfet</span>
                                <i class="fas fa-arrow-right ml-2"></i>
                            </button>
                        </div>
                    </div>

<div class="card flex-none w-80 bg-white shadow-lg snap-center">
                        <div class="relative h-56 overflow-hidden">
                            <div class="absolute inset-0 bg-gradient-to-r from-yellow-400 to-orange-500 flex items-center justify-center">
                                <i class="fas fa-lightbulb text-white text-5xl card-image"></i>
                            </div>
                            <div class="absolute inset-0 card-overlay flex flex-col justify-end p-6 text-white">
                                <h3 class="font-bold text-xl">İnovasyon</h3>
                                <p class="text-sm text-gray-200 mt-1">Yaratıcı çözümler</p>
                            </div>
                        </div>
                        <div class="p-6">
                            <p class="text-gray-600 mb-4">Sorunlara yenilikçi yaklaşımlar geliştirin ve rekabet avantajı sağlayın.</p>
                            <button class="w-full bg-gradient-to-r from-yellow-400 to-orange-500 text-white px-4 py-2.5 rounded-lg hover:opacity-90 transition flex items-center justify-center">
                                <span>Keşfet</span>
                                <i class="fas fa-arrow-right ml-2"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

<div class="flex justify-center mb-16 space-x-2">
            <button class="w-2.5 h-2.5 rounded-full bg-blue-500 focus:outline-none"></button>
            <button class="w-2.5 h-2.5 rounded-full bg-gray-300 focus:outline-none hover:bg-blue-300"></button>
            <button class="w-2.5 h-2.5 rounded-full bg-gray-300 focus:outline-none hover:bg-blue-300"></button>
            <button class="w-2.5 h-2.5 rounded-full bg-gray-300 focus:outline-none hover:bg-blue-300"></button>
        </div>

<div class="relative">
            <div class="absolute inset-0 bg-gradient-to-r from-blue-50 to-indigo-50 transform -skew-y-3 z-0"></div>
            <div class="relative z-10 py-16">
                <div class="text-center mb-12">
                    <h2 class="text-3xl font-bold mb-4">Özellikler</h2>
                    <p class="text-gray-600 max-w-xl mx-auto">Projelerinizi bir sonraki seviyeye taşıyacak modern ve işlevsel özellikler</p>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8 px-4">
                    <div class="feature-card bg-white p-6 shadow-md flex flex-col items-center text-center">
                        <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-4">
                            <i class="fas fa-bolt text-blue-500 text-2xl feature-icon"></i>
                        </div>
                        <h3 class="font-semibold text-lg mb-2">Hızlı Yükleme</h3>
                        <p class="text-gray-600">Optimize edilmiş kod yapısı sayesinde yüksek performans ve hızlı sayfa yükleme süreleri.</p>
                    </div>
                    
                    <div class="feature-card bg-white p-6 shadow-md flex flex-col items-center text-center">
                        <div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-4">
                            <i class="fas fa-mobile-alt text-purple-500 text-2xl feature-icon"></i>
                        </div>
                        <h3 class="font-semibold text-lg mb-2">Duyarlı Tasarım</h3>
                        <p class="text-gray-600">Tüm cihazlarda mükemmel görüntüleme için tamamen mobil uyumlu arayüz tasarımı.</p>
                    </div>
                    
                    <div class="feature-card bg-white p-6 shadow-md flex flex-col items-center text-center">
                        <div class="w-16 h-16 rounded-full bg-pink-100 flex items-center justify-center mb-4">
                            <i class="fas fa-sliders-h text-pink-500 text-2xl feature-icon"></i>
                        </div>
                        <h3 class="font-semibold text-lg mb-2">Özelleştirilebilir</h3>
                        <p class="text-gray-600">Projenizin ihtiyaçlarına göre kolayca özelleştirilebilen modüler bileşenler.</p>
                    </div>
                </div>
            </div>
        </div>

<div class="mt-20 text-center">
            <div class="blur-backdrop py-12 px-6 rounded-3xl max-w-2xl mx-auto">
                <h2 class="text-2xl font-bold mb-4">Hemen Başlayın</h2>
                <p class="text-gray-700 mb-8">Projenizde bu modern ve şık tasarımları kullanmak için hemen bizimle iletişime geçin.</p>
                <button class="bg-gradient-to-r from-blue-500 to-indigo-600 text-white px-8 py-3 rounded-lg hover:shadow-lg transition">
                    İletişime Geç
                </button>
            </div>
        </div>

<footer class="mt-20 text-center text-gray-500 text-sm">
            <p>© 2025 Modern Galeri. Tüm hakları saklıdır.</p>
        </footer>
    </div>

// Improved hover effect
        const cards = document.querySelectorAll('.card');
        cards.forEach(card => {
            card.addEventListener('mouseenter', () => {
                cards.forEach(c => {
                    if (c !== card) {
                        c.style.opacity = '0.7';
                        c.style.transform = 'scale(0.98)';
                    }
                });
            });
            
            card.addEventListener('mouseleave', () => {
                cards.forEach(c => {
                    c.style.opacity = '1';
                    c.style.transform = '';
                });
            });
        });

// Pagination dots functionality
        const dots = document.querySelectorAll('.rounded-full');
        dots.forEach((dot, index) => {
            dot.addEventListener('click', () => {
                // Reset all dots
                dots.forEach(d => {
                    d.classList.remove('bg-blue-500');
                    d.classList.add('bg-gray-300');
                });
                
                // Activate current dot
                dot.classList.remove('bg-gray-300');
                dot.classList.add('bg-blue-500');
                
                // Scroll to position
                slider.scrollTo({
                    left: index * cardWidth,
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>

Related Examples