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>
