Project Gallery
Explore Premium Enhanced Carousel in detail
1
/1
100%
Project Overview
Premium Enhanced Carousel
Project Description
Built with HTML, CSS, JavaScript, and Bootstrap 5, this carousel offers a sleek and modern design with smooth animations and full responsiveness across all screen sizes.
Each slide features a heading, description, and image, making it ideal for showcasing projects, services, products, or portfolio items in an engaging way.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Premium Enhanced Carousel</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="premium-carousel-container">
<div class="carousel-header">
<h1>Premium <span class="text-gradient">Visual</span> Experience</h1>
<p>Explore stunning landscapes and breathtaking scenes from around the world</p>
</div>
<div class="carousel-content">
<!-- Progress Bar -->
<div class="progress-container">
<div class="progress-bar" id="carouselProgress"></div>
</div>
<!-- Carousel Stats -->
<div class="carousel-stats">
<span id="currentSlide">1</span>/<span id="totalSlides">4</span>
</div>
<!-- Floating Particles -->
<div class="floating-particles" id="particlesContainer"></div>
<div id="premiumCarousel" class="carousel slide" data-bs-ride="carousel">
<!-- Indicators -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#premiumCarousel" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#premiumCarousel" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#premiumCarousel" data-bs-slide-to="2"></button>
<button type="button" data-bs-target="#premiumCarousel" data-bs-slide-to="3"></button>
</div>
<!-- Carousel Items -->
<div class="carousel-inner">
<!-- Mountain Majesty -->
<div class="carousel-item active" data-bs-interval="5000">
<img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/a720f63e-d1b5-458a-845a-be40af68eccd.png" class="d-block w-100 carousel-image" alt="Snow-capped mountain range with dramatic clouds and golden sunlight during sunrise">
<div class="image-overlay"></div>
<div class="carousel-caption">
<div class="caption-content">
<h3>Mountain Majesty</h3>
<p>Witness the raw beauty of nature's most magnificent peaks. Perfect for adventure seekers and nature lovers alike.</p>
<button class="cta-button">
Explore More <i class="fas fa-arrow-right ms-2"></i>
</button>
</div>
</div>
</div>
<!-- Tropical Paradise -->
<div class="carousel-item" data-bs-interval="5000">
<img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/57e522dc-5f9e-41fe-a998-50570ac76f7c.png" class="d-block w-100 carousel-image" alt="Turquoise ocean waters meeting white sandy beach with palm trees and clear blue sky">
<div class="image-overlay"></div>
<div class="carousel-caption">
<div class="caption-content">
<h3>Tropical Paradise</h3>
<p>Escape to pristine beaches with crystal clear waters and endless summer days. Pure relaxation awaits.</p>
<button class="cta-button">
Book Now <i class="fas fa-calendar ms-2"></i>
</button>
</div>
</div>
</div>
<!-- Urban Elegance -->
<div class="carousel-item" data-bs-interval="5000">
<img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/53882f71-97bd-4cc6-88a1-8e9d36611e79.png" class="d-block w-100 carousel-image" alt="Modern city skyline at dusk with illuminated skyscrapers and city lights reflecting on water">
<div class="image-overlay"></div>
<div class="carousel-caption">
<div class="caption-content">
<h3>Urban Elegance</h3>
<p>Experience the vibrant energy of metropolitan life with stunning architecture and city lights.</p>
<button class="cta-button">
Discover <i class="fas fa-building ms-2"></i>
</button>
</div>
</div>
</div>
<!-- Forest Retreat -->
<div class="carousel-item" data-bs-interval="5000">
<img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/81a01be2-6a68-4215-ba43-e6f6c708dedd.png" class="d-block w-100 carousel-image" alt="Mystical forest with sunbeams filtering through tall trees and lush green vegetation">
<div class="image-overlay"></div>
<div class="carousel-caption">
<div class="caption-content">
<h3>Forest Retreat</h3>
<p>Immerse yourself in the peaceful tranquility of ancient forests and reconnect with nature.</p>
<button class="cta-button">
Explore <i class="fas fa-tree ms-2"></i>
</button>
</div>
</div>
</div>
</div>
<!-- Custom Controls -->
<div class="custom-controls">
<div class="control-btn prev-btn" onclick="slidePrev()">
<i class="fas fa-chevron-left"></i>
</div>
<div class="control-btn next-btn" onclick="slideNext()">
<i class="fas fa-chevron-right"></i>
</div>
</div>
</div>
</div>
<!-- Control Panel -->
<div class="carousel-controls-panel">
<button class="control-panel-btn" onclick="toggleAutoplay()">
<i class="fas fa-pause" id="autoplayIcon"></i> Auto Play
</button>
<button class="control-panel-btn" onclick="goToSlide(0)">
<i class="fas fa-mountain"></i> Mountains
</button>
<button class="control-panel-btn" onclick="goToSlide(1)">
<i class="fas fa-umbrella-beach"></i> Beach
</button>
<button class="control-panel-btn" onclick="goToSlide(2)">
<i class="fas fa-city"></i> City
</button>
<button class="control-panel-btn" onclick="goToSlide(3)">
<i class="fas fa-tree"></i> Forest
</button>
</div>
</div>
</body>
</html>CSS
<style>
:root {
--primary-color: #6366f1;
--secondary-color: #8b5cf6;
--accent-color: #ec4899;
--dark-color: #1f2937;
--light-color: #f8fafc;
--glass-bg: rgba(255, 255, 255, 0.1);
--glass-border: rgba(255, 255, 255, 0.2);
--glass-shadow: rgba(0, 0, 0, 0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
overflow-x: hidden;
}
.premium-carousel-container {
max-width: 1400px;
width: 95%;
border-radius: 30px;
overflow: hidden;
background: var(--glass-bg);
backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.carousel-header {
padding: 2rem;
text-align: center;
background: rgba(0, 0, 0, 0.3);
border-bottom: 1px solid var(--glass-border);
}
.carousel-header h1 {
color: white;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.carousel-header p {
color: rgba(255, 255, 255, 0.8);
font-size: 1.1rem;
}
.carousel-content {
position: relative;
overflow: hidden;
}
.carousel-image {
height: 600px;
object-fit: cover;
transition: transform 0.5s ease;
filter: brightness(0.8);
}
.carousel-item:hover .carousel-image {
transform: scale(1.05);
filter: brightness(1);
}
.image-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
45deg,
rgba(0, 0, 0, 0.6) 0%,
transparent 50%,
rgba(0, 0, 0, 0.4) 100%
);
}
.carousel-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 3rem;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
transform: translateY(0);
transition: transform 0.3s ease;
}
.carousel-item:hover .carousel-caption {
transform: translateY(-10px);
}
.caption-content {
max-width: 600px;
}
.carousel-caption h3 {
font-size: 2.5rem;
font-weight: 700;
color: white;
margin-bottom: 1rem;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
}
.carousel-caption p {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin-bottom: 1.5rem;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
}
.cta-button {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
padding: 12px 24px;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.carousel-indicators {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 15px;
z-index: 100;
}
.carousel-indicators button {
width: 16px;
height: 16px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
border: 2px solid transparent;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.carousel-indicators button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
transition: left 4.5s linear;
}
.carousel-indicators .active::before {
left: 0;
}
.carousel-indicators .active {
border-color: white;
transform: scale(1.3);
}
.custom-controls {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
padding: 0 2rem;
z-index: 100;
}
.control-btn {
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--glass-bg);
backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
font-size: 1.2rem;
}
.control-btn:hover {
background: var(--primary-color);
transform: scale(1.1);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
.progress-container {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: rgba(255, 255, 255, 0.2);
z-index: 100;
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--accent-color), var(--primary-color));
width: 0%;
transition: width 4.5s linear;
}
.carousel-controls-panel {
padding: 1.5rem;
background: rgba(0, 0, 0, 0.3);
border-top: 1px solid var(--glass-border);
display: flex;
justify-content: center;
gap: 1rem;
}
.control-panel-btn {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
color: white;
padding: 10px 20px;
border-radius: 20px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
}
.control-panel-btn:hover {
background: var(--primary-color);
}
.carousel-stats {
position: absolute;
top: 20px;
right: 20px;
background: var(--glass-bg);
backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
padding: 10px 15px;
border-radius: 15px;
color: white;
font-weight: 500;
z-index: 100;
}
@media (max-width: 1200px) {
.carousel-image {
height: 500px;
}
.carousel-caption h3 {
font-size: 2rem;
}
}
@media (max-width: 768px) {
body {
padding: 1rem;
}
.carousel-image {
height: 400px;
}
.carousel-caption {
padding: 2rem;
}
.carousel-caption h3 {
font-size: 1.5rem;
}
.carousel-caption p {
font-size: 1rem;
}
.control-btn {
width: 50px;
height: 50px;
}
.carousel-header h1 {
font-size: 2rem;
}
}
@media (max-width: 480px) {
.carousel-image {
height: 350px;
}
.carousel-caption {
padding: 1.5rem;
}
.control-btn {
width: 40px;
height: 40px;
font-size: 1rem;
}
}
.floating-particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.particle {
position: absolute;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(180deg);
}
}
.glass-effect {
background: var(--glass-bg);
backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: 20px;
}
.text-gradient {
background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
</style>JavaScript
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
let carousel;
let autoplayInterval;
let isAutoplay = true;
document.addEventListener('DOMContentLoaded', function() {
// Initialize carousel
carousel = new bootstrap.Carousel(document.getElementById('premiumCarousel'), {
interval: 5000,
wrap: true
});
// Create floating particles
createParticles();
// Start autoplay
startAutoplay();
// Update slide counter
updateSlideCounter();
// Add event listeners
document.getElementById('premiumCarousel').addEventListener('slid.bs.carousel', function(event) {
updateSlideCounter();
resetProgressBar();
updateActiveIndicator(event.to);
});
// Initial progress bar
resetProgressBar();
});
function createParticles() {
const container = document.getElementById('particlesContainer');
for (let i = 0; i < 15; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
// Random properties
const size = Math.random() * 10 + 5;
const left = Math.random() * 100;
const top = Math.random() * 100;
const delay = Math.random() * 6;
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
particle.style.left = `${left}%`;
particle.style.top = `${top}%`;
particle.style.animationDelay = `${delay}s`;
container.appendChild(particle);
}
}
function slidePrev() {
carousel.prev();
resetProgressBar();
}
function slideNext() {
carousel.next();
resetProgressBar();
}
function goToSlide(index) {
carousel.to(index);
resetProgressBar();
}
function toggleAutoplay() {
if (isAutoplay) {
stopAutoplay();
document.getElementById('autoplayIcon').className = 'fas fa-play';
} else {
startAutoplay();
document.getElementById('autoplayIcon').className = 'fas fa-pause';
}
isAutoplay = !isAutoplay;
}
function startAutoplay() {
autoplayInterval = setInterval(() => {
carousel.next();
}, 5000);
}
function stopAutoplay() {
clearInterval(autoplayInterval);
}
function updateSlideCounter() {
const activeSlide = document.querySelector('.carousel-item.active');
const slides = document.querySelectorAll('.carousel-item');
const currentIndex = Array.from(slides).indexOf(activeSlide) + 1;
document.getElementById('currentSlide').textContent = currentIndex;
document.getElementById('totalSlides').textContent = slides.length;
}
function resetProgressBar() {
const progressBar = document.getElementById('carouselProgress');
progressBar.style.width = '0%';
// Trigger reflow
void progressBar.offsetWidth;
progressBar.style.width = '100%';
}
function updateActiveIndicator(index) {
const indicators = document.querySelectorAll('.carousel-indicators button');
indicators.forEach((indicator, i) => {
if (i === index) {
indicator.classList.add('active');
} else {
indicator.classList.remove('active');
}
});
}
// Add keyboard navigation
document.addEventListener('keydown', function(e) {
if (e.key === 'ArrowLeft') {
slidePrev();
} else if (e.key === 'ArrowRight') {
slideNext();
} else if (e.key === ' ') {
toggleAutoplay();
}
});
</script>