I’ll create an interactive card slider with a zigzag layout that alternates card positions for visual interest. This design will work well for showcasing products, testimonials, or portfolio items.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Auto Zigzag Card Slider</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; color: #fff; } .container { max-width: 1200px; width: 100%; text-align: center; } h1 { font-size: 2.8rem; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } .subtitle { font-size: 1.2rem; margin-bottom: 40px; opacity: 0.9; } .slider-container { position: relative; padding: 40px 0; overflow: hidden; width: 100%; } .cards-wrapper { display: flex; transition: transform 0.8s ease; margin: 0 -15px; } .card { flex: 0 0 calc(33.333% - 30px); margin: 0 15px; background: rgba(255, 255, 255, 0.9); border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); transition: transform 0.5s ease, box-shadow 0.5s ease; color: #333; display: flex; flex-direction: column; position: relative; } .card:nth-child(even) { transform: translateY(40px); } .card:hover { transform: translateY(-10px) scale(1.03); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); } .card-image { height: 200px; overflow: hidden; position: relative; } .card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .card:hover .card-image img { transform: scale(1.1); } .card-content { padding: 20px; flex-grow: 1; } .card-title { font-size: 1.4rem; margin-bottom: 10px; color: #2c3e50; } .card-description { color: #7f8c8d; line-height: 1.6; margin-bottom: 15px; } .card-button { display: inline-block; padding: 10px 20px; background: linear-gradient(to right, #6a11cb, #2575fc); color: white; border-radius: 30px; text-decoration: none; font-weight: 600; transition: transform 0.3s ease, box-shadow 0.3s ease; } .card-button:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .slider-controls { display: flex; justify-content: center; margin-top: 30px; gap: 15px; } .control-btn { width: 50px; height: 50px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); border: none; color: white; font-size: 1.5rem; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; } .control-btn:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.1); } .indicators { display: flex; justify-content: center; margin-top: 20px; gap: 10px; } .indicator { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); cursor: pointer; transition: all 0.3s ease; } .indicator.active { background: white; transform: scale(1.3); } .auto-toggle { margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 10px; } .toggle-btn { padding: 8px 16px; background: rgba(255, 255, 255, 0.2); border: none; border-radius: 20px; color: white; cursor: pointer; transition: all 0.3s ease; } .toggle-btn:hover { background: rgba(255, 255, 255, 0.3); } .toggle-btn.active { background: rgba(255, 255, 255, 0.4); } @media (max-width: 992px) { .card { flex: 0 0 calc(50% - 30px); } } @media (max-width: 576px) { .card { flex: 0 0 calc(100% - 30px); } .card:nth-child(even) { transform: translateY(0); } h1 { font-size: 2.2rem; } } </style></head><body> <div class="container"> <h1>Auto Zigzag Card Slider</h1> <p class="subtitle">Watch the cards slide automatically with a zigzag pattern</p> <div class="slider-container"> <div class="cards-wrapper"> <div class="card"> <div class="card-image"> <img src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Technology"> </div> <div class="card-content"> <h3 class="card-title">Modern Technology</h3> <p class="card-description">Discover the latest advancements in technology and how they're shaping our future.</p> <a href="#" class="card-button">Learn More</a> </div> </div> <div class="card"> <div class="card-image"> <img src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Nature"> </div> <div class="card-content"> <h3 class="card-title">Beautiful Nature</h3> <p class="card-description">Explore the wonders of nature and find peace in the great outdoors.</p> <a href="#" class="card-button">Explore</a> </div> </div> <div class="card"> <div class="card-image"> <img src="https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Design"> </div> <div class="card-content"> <h3 class="card-title">Creative Design</h3> <p class="card-description">See how creative design solutions can transform ordinary into extraordinary.</p> <a href="#" class="card-button">View Work</a> </div> </div> <div class="card"> <div class="card-image"> <img src="https://images.unsplash.com/photo-1542744095-fcf48d80b0fd?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Development"> </div> <div class="card-content"> <h3 class="card-title">Web Development</h3> <p class="card-description">Learn about modern web development practices and cutting-edge frameworks.</p> <a href="#" class="card-button">Get Started</a> </div> </div> <div class="card"> <div class="card-image"> <img src="https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Music"> </div> <div class="card-content"> <h3 class="card-title">Music Production</h3> <p class="card-description">Dive into the world of music production and create your own sound.</p> <a href="#" class="card-button">Listen</a> </div> </div> <div class="card"> <div class="card-image"> <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Analytics"> </div> <div class="card-content"> <h3 class="card-title">Data Analytics</h3> <p class="card-description">Harness the power of data to drive business decisions and strategies.</p> <a href="#" class="card-button">Analyze</a> </div> </div> </div> <div class="slider-controls"> <button class="control-btn prev-btn"><i class="fas fa-chevron-left"></i></button> <button class="control-btn next-btn"><i class="fas fa-chevron-right"></i></button> </div> <div class="indicators"> <div class="indicator active"></div> <div class="indicator"></div> <div class="indicator"></div> </div> <div class="auto-toggle"> <button class="toggle-btn active" id="pause-btn"><i class="fas fa-pause"></i> Pause</button> <button class="toggle-btn" id="play-btn"><i class="fas fa-play"></i> Play</button> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const cardsWrapper = document.querySelector('.cards-wrapper'); const cards = document.querySelectorAll('.card'); const prevBtn = document.querySelector('.prev-btn'); const nextBtn = document.querySelector('.next-btn'); const indicators = document.querySelectorAll('.indicator'); const pauseBtn = document.getElementById('pause-btn'); const playBtn = document.getElementById('play-btn'); let currentIndex = 0; let autoSlideInterval; const cardCount = cards.length; const cardsPerView = Math.min(3, cardCount); // Show up to 3 cards at a time // Initialize auto-slide startAutoSlide(); // Set initial position updateSlider(); // Event listeners for buttons prevBtn.addEventListener('click', () => { if (currentIndex > 0) { currentIndex--; updateSlider(); resetAutoSlide(); } }); nextBtn.addEventListener('click', () => { if (currentIndex < cardCount - cardsPerView) { currentIndex++; updateSlider(); resetAutoSlide(); } }); // Event listeners for indicators indicators.forEach((indicator, index) => { indicator.addEventListener('click', () => { currentIndex = index * cardsPerView; updateSlider(); resetAutoSlide(); }); }); // Toggle auto-slide pauseBtn.addEventListener('click', () => { stopAutoSlide(); pauseBtn.classList.add('active'); playBtn.classList.remove('active'); }); playBtn.addEventListener('click', () => { startAutoSlide(); playBtn.classList.add('active'); pauseBtn.classList.remove('active'); }); // Touch events for mobile swipe let startX = 0; let endX = 0; cardsWrapper.addEventListener('touchstart', (e) => { startX = e.touches[0].clientX; }, { passive: true }); cardsWrapper.addEventListener('touchend', (e) => { endX = e.changedTouches[0].clientX; handleSwipe(); }, { passive: true }); function handleSwipe() { const swipeThreshold = 50; if (startX - endX > swipeThreshold) { // Swipe left - next if (currentIndex < cardCount - cardsPerView) { currentIndex++; updateSlider(); resetAutoSlide(); } } else if (endX - startX > swipeThreshold) { // Swipe right - previous if (currentIndex > 0) { currentIndex--; updateSlider(); resetAutoSlide(); } } } function updateSlider() { const cardWidth = cards[0].offsetWidth + 30; // width + margin cardsWrapper.style.transform = `translateX(-${currentIndex * cardWidth}px)`; // Update indicators indicators.forEach((indicator, index) => { indicator.classList.toggle('active', index === Math.floor(currentIndex / cardsPerView)); }); // Show/hide navigation buttons based on position prevBtn.style.visibility = currentIndex === 0 ? 'hidden' : 'visible'; nextBtn.style.visibility = currentIndex >= cardCount - cardsPerView ? 'hidden' : 'visible'; } function startAutoSlide() { autoSlideInterval = setInterval(() => { if (currentIndex < cardCount - cardsPerView) { currentIndex++; } else { currentIndex = 0; // Loop back to start } updateSlider(); }, 3000); // Change slide every 3 seconds } function stopAutoSlide() { clearInterval(autoSlideInterval); } function resetAutoSlide() { stopAutoSlide(); startAutoSlide(); } // Handle window resize window.addEventListener('resize', () => { // Recalculate the translate value based on current card width const cardWidth = cards[0].offsetWidth + 30; cardsWrapper.style.transform = `translateX(-${currentIndex * cardWidth}px)`; }); // Pause auto-slide when user hovers over slider cardsWrapper.addEventListener('mouseenter', stopAutoSlide); cardsWrapper.addEventListener('mouseleave', () => { if (playBtn.classList.contains('active')) { startAutoSlide(); } }); }); </script></body></html>
