Features Implemented:
Horizontal Carousel Layout:
- Uses flexbox for smooth horizontal sliding
- Images scale properly with object-fit: cover
Navigation Arrows:
- Previous/next buttons with Font Awesome icons
- Clean, modern styling with subtle shadows
Smooth Animations:
- CSS transitions for sliding effect
- 0.5s ease-in-out transition timing
Autoplay with Pause:
- Auto-advances every 5 seconds
- Pauses when user hovers over slider
- Resets timer on manual navigation
Lightbox Feature:
- Click any image to open in lightbox
- Dark overlay with proper sizing
- Caption display and close button
Full Responsiveness:
- Adapts to different screen sizes
- Media queries for tablet and mobile views
- Proper image scaling
Additional Features:
- Dot indicators for current slide
- Keyboard navigation (arrow keys)
- Infinite looping effect
- Clean, minimal styling with modern fonts
The slider uses placeholder images from Unsplash, but you can replace them with your own image URLs. The implementation is self-contained with no external dependencies (except Font Awesome for icons).
/* Base styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f5f5f5;
color: #333;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 2rem auto;
padding: 0 1rem;
}
h1 {
text-align: center;
margin-bottom: 2rem;
font-weight: 300;
font-size: 2.5rem;
color: #444;
}
/* Slider styles */
.slider-container {
position: relative;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
height: 400px;
}
.slider {
display: flex;
transition: transform 0.5s ease-in-out;
height: 100%;
}
.slide {
min-width: 100%;
position: relative;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.slide-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
color: white;
padding: 1rem;
text-align: center;
font-weight: 300;
}
/* Navigation arrows */
.slider-nav {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
z-index: 10;
}
.slider-nav button {
background: rgba(255, 255, 255, 0.7);
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
margin: 0 1rem;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.slider-nav button:hover {
background: rgba(255, 255, 255, 0.9);
}
.slider-nav button i {
font-size: 1.5rem;
color: #333;
}
/* Lightbox styles */
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 100;
justify-content: center;
align-items: center;
}
.lightbox.active {
display: flex;
}
.lightbox-content {
position: relative;
max-width: 90%;
max-height: 90%;
}
.lightbox-content img {
max-width: 100%;
max-height: 80vh;
display: block;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
}
.lightbox-caption {
color: white;
text-align: center;
padding: 1rem 0;
font-weight: 300;
}
.close-lightbox {
position: absolute;
top: -40px;
right: 0;
color: white;
font-size: 2rem;
cursor: pointer;
background: none;
border: none;
}
/* Dots indicator */
.slider-dots {
display: flex;
justify-content: center;
margin-top: 1rem;
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: #ccc;
margin: 0 5px;
cursor: pointer;
transition: background 0.3s ease;
}
.dot.active {
background: #666;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.slider-container {
height: 300px;
}
.slider-nav button {
width: 30px;
height: 30px;
margin: 0 0.5rem;
}
.slider-nav button i {
font-size: 1rem;
}
}
@media (max-width: 480px) {
.slider-container {
height: 200px;
}
.slide-caption {
font-size: 0.8rem;
padding: 0.5rem;
}
}
document.addEventListener('DOMContentLoaded', function() {
const slider = document.querySelector('.slider');
const slides = document.querySelectorAll('.slide');
const prevBtn = document.querySelector('.prev-slide');
const nextBtn = document.querySelector('.next-slide');
const dotsContainer = document.querySelector('.slider-dots');
const lightbox = document.querySelector('.lightbox');
const lightboxImg = document.querySelector('.lightbox-content img');
const lightboxCaption = document.querySelector('.lightbox-caption');
const closeLightbox = document.querySelector('.close-lightbox');
let currentIndex = 0;
let slideInterval;
const slideCount = slides.length;
// Initialize dots
function initDots() {
slides.forEach((_, index) => {
const dot = document.createElement('div');
dot.classList.add('dot');
if (index === 0) dot.classList.add('active');
dot.addEventListener('click', () => goToSlide(index));
dotsContainer.appendChild(dot);
});
}
// Update dots
function updateDots() {
const dots = document.querySelectorAll('.dot');
dots.forEach((dot, index) => {
dot.classList.toggle('active', index === currentIndex);
});
}
// Go to specific slide
function goToSlide(index) {
// Handle wrap-around for infinite effect
if (index < 0) {
currentIndex = slideCount - 1;
} else if (index >= slideCount) {
currentIndex = 0;
} else {
currentIndex = index;
}
slider.style.transform = `translateX(-${currentIndex * 100}%)`;
updateDots();
// Reset autoplay timer
resetInterval();
}
// Next slide
function nextSlide() {
goToSlide(currentIndex + 1);
}
// Previous slide
function prevSlide() {
goToSlide(currentIndex - 1);
}
// Start autoplay
function startInterval() {
slideInterval = setInterval(nextSlide, 5000);
}
// Reset autoplay timer
function resetInterval() {
clearInterval(slideInterval);
startInterval();
}
// Open lightbox
function openLightbox(index) {
const slide = slides[index];
const img = slide.querySelector('img');
const caption = slide.querySelector('.slide-caption');
lightboxImg.src = img.src;
lightboxImg.alt = img.alt;
lightboxCaption.textContent = caption.textContent;
lightbox.classList.add('active');
}
// Close lightbox
function closeLightboxHandler() {
lightbox.classList.remove('active');
}
// Event listeners
prevBtn.addEventListener('click', prevSlide);
nextBtn.addEventListener('click', nextSlide);
// Keyboard navigation
document.addEventListener('keydown', (e) => {
if (lightbox.classList.contains('active')) {
if (e.key === 'Escape') {
closeLightboxHandler();
}
return;
}
if (e.key === 'ArrowLeft') {
prevSlide();
} else if (e.key === 'ArrowRight') {
nextSlide();
}
});
// Click on slide to open lightbox
slides.forEach((slide, index) => {
slide.addEventListener('click', () => openLightbox(index));
});
closeLightbox.addEventListener('click', closeLightboxHandler);
lightbox.addEventListener('click', (e) => {
if (e.target === lightbox) {
closeLightboxHandler();
}
});
// Pause on hover
slider.addEventListener('mouseenter', () => {
clearInterval(slideInterval);
});
slider.addEventListener('mouseleave', startInterval);
// Initialize
initDots();
startInterval();
// Responsive adjustments
function handleResize() {
slider.style.transform = `translateX(-${currentIndex * 100}%)`;
}
window.addEventListener('resize', handleResize);
});
Post a Comment
Thank you
Learning robo team