Responsive Sliders
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Scroller</title> <link rel="stylesheet" href="scroller.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> </head> <body> <div class="scroller-container"> <h2 class="scroller-title">Featured Content</h2> <div class="scroller-wrapper"> <button class="scroller-btn scroller-prev" aria-label="Previous"> <i class="fas fa-chevron-left"></i> </button> <div class="scroller"> <div class="scroller-item"> <div class="item-content"> <img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=400&q=80" alt="Nature 1"> <h3>Beautiful Nature</h3> <p>Explore the wonders of our natural world with this stunning landscape.</p> </div> </div> <div class="scroller-item"> <div class="item-content"> <img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=400&q=80" alt="City 1"> <h3>Urban Life</h3> <p>Discover the vibrant energy of city living in this dynamic scene.</p> </div> </div> <div class="scroller-item"> <div class="item-content"> <img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=400&q=80" alt="Tech 1"> <h3>Modern Tech</h3> <p>The latest innovations that are shaping our future today.</p> </div> </div> <div class="scroller-item"> <div class="item-content"> <img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=400&q=80" alt="Food 1"> <h3>Delicious Cuisine</h3> <p>Tantalize your taste buds with this culinary masterpiece.</p> </div> </div> <div class="scroller-item"> <div class="item-content"> <img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=400&q=80" alt="Travel 1"> <h3>Adventure Awaits</h3> <p>Get inspired for your next great adventure with this breathtaking view.</p> </div> </div> <div class="scroller-item"> <div class="item-content"> <img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=400&q=80" alt="Architecture 1"> <h3>Architectural Marvel</h3> <p>Human creativity expressed through stunning architectural design.</p> </div> </div> </div> <button class="scroller-btn scroller-next" aria-label="Next"> <i class="fas fa-chevron-right"></i> </button> </div> <div class="scroller-dots"></div> </div> <script src="scroller.js"></script> </body> </html>
CSS
/* Base Styles */ :root { --primary-color: #3498db; --secondary-color: #2c3e50; --accent-color: #e74c3c; --light-color: #ecf0f1; --dark-color: #2c3e50; --text-color: #333; --text-light: #7f8c8d; --white: #fff; --shadow: 0 5px 15px rgba(0, 0, 0, 0.1); --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: var(--text-color); padding: 20px; background-color: #f9f9f9; } /* Scroller Container */ .scroller-container { max-width: 1200px; margin: 0 auto; padding: 20px; } .scroller-title { text-align: center; margin-bottom: 30px; font-size: 2rem; color: var(--secondary-color); position: relative; } .scroller-title::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background-color: var(--primary-color); } /* Scroller Wrapper */ .scroller-wrapper { position: relative; margin: 0 auto; } /* Scroller Buttons */ .scroller-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background-color: var(--white); border: none; border-radius: 50%; box-shadow: var(--shadow); cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; color: var(--secondary-color); transition: var(--transition); } .scroller-btn:hover { background-color: var(--primary-color); color: var(--white); } .scroller-prev { left: -20px; } .scroller-next { right: -20px; } /* Scroller */ .scroller { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding: 20px 0; gap: 20px; scrollbar-width: none; /* Firefox */ } .scroller::-webkit-scrollbar { display: none; /* Chrome/Safari */ } /* Scroller Items */ .scroller-item { flex: 0 0 calc(33.333% - 20px); scroll-snap-align: start; min-width: 300px; } .item-content { background-color: var(--white); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); transition: var(--transition); height: 100%; } .item-content:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); } .item-content img { width: 100%; height: 200px; object-fit: cover; display: block; } .item-content h3 { padding: 15px 15px 5px; font-size: 1.2rem; color: var(--secondary-color); } .item-content p { padding: 0 15px 15px; color: var(--text-light); font-size: 0.95rem; } /* Scroller Dots */ .scroller-dots { display: flex; justify-content: center; gap: 10px; margin-top: 20px; } .scroller-dots .dot { width: 12px; height: 12px; border-radius: 50%; background-color: #ddd; cursor: pointer; transition: var(--transition); } .scroller-dots .dot.active { background-color: var(--primary-color); } /* Responsive Styles */ @media (max-width: 992px) { .scroller-item { flex: 0 0 calc(50% - 15px); } .scroller-prev { left: -10px; } .scroller-next { right: -10px; } } @media (max-width: 768px) { .scroller-item { flex: 0 0 calc(100% - 10px); } .scroller-btn { width: 35px; height: 35px; } .scroller-title { font-size: 1.8rem; } } @media (max-width: 480px) { .scroller-container { padding: 10px; } .scroller-title { font-size: 1.5rem; } .scroller-item { min-width: 260px; } .item-content h3 { font-size: 1.1rem; } .item-content p { font-size: 0.9rem; } }
JavaScript
document.addEventListener('DOMContentLoaded', function() { const scroller = document.querySelector('.scroller'); const prevBtn = document.querySelector('.scroller-prev'); const nextBtn = document.querySelector('.scroller-next'); const dotsContainer = document.querySelector('.scroller-dots'); const items = document.querySelectorAll('.scroller-item'); let currentIndex = 0; let itemWidth = items[0].offsetWidth; let visibleItems = calculateVisibleItems(); // Create dots items.forEach((_, index) => { const dot = document.createElement('div'); dot.classList.add('dot'); if (index === 0) dot.classList.add('active'); dot.addEventListener('click', () => scrollToItem(index)); dotsContainer.appendChild(dot); }); const dots = document.querySelectorAll('.scroller-dots .dot'); // Calculate how many items are visible based on container width function calculateVisibleItems() { const containerWidth = scroller.offsetWidth; itemWidth = items[0].offsetWidth + parseInt(window.getComputedStyle(scroller).gap); return Math.floor(containerWidth / itemWidth); } // Scroll to specific item function scrollToItem(index) { currentIndex = index; const scrollPosition = index * itemWidth; scroller.scrollTo({ left: scrollPosition, behavior: 'smooth' }); updateDots(); updateButtonStates(); } // Update dot indicators function updateDots() { dots.forEach((dot, index) => { dot.classList.toggle('active', index === currentIndex); }); } // Update button states function updateButtonStates() { prevBtn.disabled = currentIndex === 0; nextBtn.disabled = currentIndex >= items.length - visibleItems; } // Next button click nextBtn.addEventListener('click', () => { if (currentIndex < items.length - visibleItems) { currentIndex++; scrollToItem(currentIndex); } }); // Previous button click prevBtn.addEventListener('click', () => { if (currentIndex > 0) { currentIndex--; scrollToItem(currentIndex); } }); // Handle scroll events scroller.addEventListener('scroll', () => { const scrollPosition = scroller.scrollLeft; currentIndex = Math.round(scrollPosition / itemWidth); updateDots(); updateButtonStates(); }); // Handle window resize window.addEventListener('resize', () => { itemWidth = items[0].offsetWidth + parseInt(window.getComputedStyle(scroller).gap); visibleItems = calculateVisibleItems(); scrollToItem(currentIndex); }); // Keyboard navigation document.addEventListener('keydown', (e) => { if (e.key === 'ArrowLeft') { prevBtn.click(); } else if (e.key === 'ArrowRight') { nextBtn.click(); } }); // Initialize updateButtonStates(); // Optional: Auto-scroll (uncomment to enable) /* let autoScrollInterval = setInterval(() => { if (currentIndex >= items.length - visibleItems) { currentIndex = 0; } else { currentIndex++; } scrollToItem(currentIndex); }, 3000); // Pause auto-scroll on hover scroller.addEventListener('mouseenter', () => { clearInterval(autoScrollInterval); }); scroller.addEventListener('mouseleave', () => { autoScrollInterval = setInterval(() => { if (currentIndex >= items.length - visibleItems) { currentIndex = 0; } else { currentIndex++; } scrollToItem(currentIndex); }, 3000); }); */ });
Output Preview
Desktop
Mobile
Fullscreen
