Project Gallery
Explore Modern Responsive Carousel in detail
3
/3
100%
100%
100%
Project Overview
Modern Responsive Carousel
Project Description
This Modern Responsive Carousel is built using HTML, CSS, JavaScript, and Bootstrap 5.
It features a sleek design, smooth animations, and full responsiveness across all devices.
Each slide includes a heading, paragraph, and image, making it perfect for showcasing projects, services, products, or portfolio items.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Image Carousel</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<div class="container my-5">
<div class="carousel-container">
<div id="imageCarousel" class="carousel slide" data-bs-ride="carousel">
<!-- Progress bar -->
<div class="progress-bar"></div>
<!-- Indicators -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#imageCarousel" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#imageCarousel" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#imageCarousel" data-bs-slide-to="2"></button>
<button type="button" data-bs-target="#imageCarousel" data-bs-slide-to="3"></button>
</div>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="5000">
<img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/60046ab2-b67f-4087-bb5e-c93e7d0c5454.png" class="d-block w-100 carousel-image" alt="Majestic mountain landscape with snow-capped peaks and pine forest during golden hour sunset">
<div class="image-overlay"></div>
<div class="carousel-caption text-center">
<h3>Mountain Majesty</h3>
<p>Explore the breathtaking beauty of nature's grandest peaks and pristine wilderness.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="5000">
<img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/ea8ddef5-1a99-44b5-ae01-0cc2f8e27049.png" class="d-block w-100 carousel-image" alt="Tropical beach paradise with turquoise waters, white sand, and palm trees under clear blue sky">
<div class="image-overlay"></div>
<div class="carousel-caption text-center">
<h3>Tropical Paradise</h3>
<p>Relax on pristine beaches with crystal clear waters and endless sunshine.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="5000">
<img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/aa9e51d9-b040-4a82-bc4b-311e71395fb5.png" class="d-block w-100 carousel-image" alt="Modern city skyline at night with illuminated skyscrapers and glowing lights">
<div class="image-overlay"></div>
<div class="carousel-caption text-center">
<h3>Urban Elegance</h3>
<p>Experience the vibrant energy and modern architecture of metropolitan life.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="5000">
<img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/8c3190ec-eb15-4cb8-86a1-8461ebbbca7f.png" class="d-block w-100 carousel-image" alt="Lush green forest with sunlight filtering through tall trees and moss-covered ground">
<div class="image-overlay"></div>
<div class="carousel-caption text-center">
<h3>Forest Serenity</h3>
<p>Immerse yourself in the peaceful tranquility of ancient, untouched forests.</p>
</div>
</div>
</div>
<!-- Navigation controls -->
<button class="carousel-control-prev" type="button" data-bs-target="#imageCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#imageCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
<!-- Number indicators -->
<div class="carousel-indicators-numbers d-none d-md-flex">
<span class="indicator-number active" data-bs-target="#imageCarousel" data-bs-slide-to="0">1</span>
<span class="indicator-number" data-bs-target="#imageCarousel" data-bs-slide-to="1">2</span>
<span class="indicator-number" data-bs-target="#imageCarousel" data-bs-slide-to="2">3</span>
<span class="indicator-number" data-bs-target="#imageCarousel" data-bs-slide-to="3">4</span>
</div>
</div>
</div>
</div>
</body>
</html>CSS
<style>
:root {
--primary-color: #2c3e50;
--accent-color: #e74c3c;
--text-color: #333;
--bg-light: #f8f9fa;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.carousel-container {
max-width: 1200px;
width: 90%;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
background: white;
}
.carousel-caption {
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
padding: 20px;
border-radius: 0 0 15px 15px;
}
.carousel-caption h3 {
font-size: 2rem;
font-weight: 600;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
.carousel-caption p {
font-size: 1.1rem;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}
.carousel-indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
margin: 0 5px;
background-color: rgba(255, 255, 255, 0.5);
border: 2px solid transparent;
}
.carousel-indicators .active {
background-color: var(--accent-color);
border-color: white;
transform: scale(1.2);
}
.carousel-control-prev,
.carousel-control-next {
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
top: 50%;
transform: translateY(-50%);
opacity: 0.8;
transition: all 0.3s ease;
}
.carousel-control-prev {
left: 20px;
}
.carousel-control-next {
right: 20px;
}
.carousel-control-prev:hover,
.carousel-control-next:hover {
opacity: 1;
background: rgba(255, 255, 255, 0.3);
}
.carousel-image {
height: 500px;
object-fit: cover;
}
.image-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(0, 0, 0, 0.3), transparent);
}
.progress-bar {
position: absolute;
bottom: 0;
left: 0;
height: 4px;
background: var(--accent-color);
width: 0%;
transition: width 4.5s linear;
}
.carousel-item.active .progress-bar {
width: 100%;
}
@media (max-width: 768px) {
.carousel-image {
height: 300px;
}
.carousel-caption h3 {
font-size: 1.5rem;
}
.carousel-caption p {
font-size: 0.9rem;
}
.carousel-control-prev,
.carousel-control-next {
width: 40px;
height: 40px;
}
}
.carousel-indicators-numbers {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
}
.indicator-number {
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
border: 2px solid transparent;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
}
.indicator-number.active {
background: var(--accent-color);
border-color: white;
transform: scale(1.2);
}
</style>JavaScript
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const carousel = document.getElementById('imageCarousel');
const carouselItems = carousel.querySelectorAll('.carousel-item');
const numberIndicators = carousel.querySelectorAll('.indicator-number');
// Add click event listeners to number indicators
numberIndicators.forEach((indicator, index) => {
indicator.addEventListener('click', function() {
const carousel = bootstrap.Carousel.getInstance(document.getElementById('imageCarousel'));
carousel.to(index);
updateActiveIndicator(index);
});
});
// Function to update active indicator
function updateActiveIndicator(activeIndex) {
numberIndicators.forEach((indicator, index) => {
if (index === activeIndex) {
indicator.classList.add('active');
} else {
indicator.classList.remove('active');
}
});
}
// Listen for slide events to update number indicators
carousel.addEventListener('slid.bs.carousel', function(event) {
const activeIndex = Array.from(carouselItems).indexOf(event.relatedTarget);
updateActiveIndicator(activeIndex);
});
// Add hover effects for carousel items
carouselItems.forEach(item => {
item.addEventListener('mouseenter', function() {
this.style.transform = 'scale(1.02)';
this.style.transition = 'transform 0.3s ease';
});
item.addEventListener('mouseleave', function() {
this.style.transform = 'scale(1)';
});
});
// Auto-advance carousel with custom timing
setInterval(() => {
const carouselInstance = bootstrap.Carousel.getInstance(carousel);
carouselInstance.next();
}, 5000);
});
</script>