<!-- E-commerce Featured Carousel -->
<div class="container py-4">
<div id="ecommerceHeroCarousel" class="carousel slide carousel-fade shadow-sm rounded-5 overflow-hidden" data-bs-ride="carousel">
<!-- Indicators -->
<div class="carousel-indicators mb-4">
<button type="button" data-bs-target="#ecommerceHeroCarousel" data-bs-slide-to="0" class="active rounded-circle" aria-current="true" style="width: 12px; height: 12px;"></button>
<button type="button" data-bs-target="#ecommerceHeroCarousel" data-bs-slide-to="1" class="rounded-circle" style="width: 12px; height: 12px;"></button>
<button type="button" data-bs-target="#ecommerceHeroCarousel" data-bs-slide-to="2" class="rounded-circle" style="width: 12px; height: 12px;"></button>
</div>
<div class="carousel-inner">
<!-- Slide 1 -->
<div class="carousel-item active bg-light position-relative" style="min-height: 450px;">
<div class="row align-items-center h-100 g-0">
<div class="col-md-6 p-5 order-2 order-md-1">
<div class="ps-lg-5 animate-content">
<span class="badge bg-danger mb-3 px-3 py-2 rounded-pill shadow-sm">NEW SEASON</span>
<h1 class="display-3 fw-bold text-dark mb-3">Wireless <br><span class="text-primary">Headphones</span></h1>
<p class="lead text-muted mb-4">Experience crystal clear sound with active noise cancellation technology.</p>
<h3 class="fw-bold mb-4 text-dark">$299.99 <del class="fs-6 text-muted fw-normal">$349.99</del></h3>
<div class="d-flex gap-3">
<a href="#" class="btn btn-primary btn-lg px-4 rounded-pill shadow">Shop Now <i class="bi bi-cart-plus ms-2"></i></a>
<a href="#" class="btn btn-outline-dark btn-lg px-4 rounded-pill">Details</a>
</div>
</div>
</div>
<div class="col-md-6 order-1 order-md-2 text-center p-4">
<img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?auto=format&fit=crop&w=600&q=80" class="img-fluid rounded-4 animate-image" alt="Product" style="max-height: 400px; width: 100%; object-fit: cover;">
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="carousel-item bg-dark position-relative" style="min-height: 450px;">
<div class="row align-items-center h-100 g-0">
<div class="col-md-6 p-5 order-2 order-md-1">
<div class="ps-lg-5 text-white animate-content">
<span class="badge bg-info mb-3 px-3 py-2 rounded-pill">TECH DEAL</span>
<h1 class="display-3 fw-bold mb-3">Smart Watch <br><span class="text-info">Ultra Pro</span></h1>
<p class="lead opacity-75 mb-4">Tracking your health metrics and notifications on the go.</p>
<h3 class="fw-bold mb-4 text-info">$149.00</h3>
<a href="#" class="btn btn-info text-white btn-lg px-5 rounded-pill shadow">Get Offer</a>
</div>
</div>
<div class="col-md-6 order-1 order-md-2 text-center p-4">
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&w=600&q=80" class="img-fluid rounded-4 animate-image" alt="Product" style="max-height: 400px; width: 100%; object-fit: cover;">
</div>
</div>
</div>
<!-- Slide 3 -->
<div class="carousel-item bg-primary-subtle position-relative" style="min-height: 450px;">
<div class="row align-items-center h-100 g-0">
<div class="col-md-6 p-5 order-2 order-md-1">
<div class="ps-lg-5 animate-content">
<span class="badge bg-primary mb-3 px-3 py-2 rounded-pill">MEMBERS ONLY</span>
<h1 class="display-3 fw-bold text-dark mb-3">Digital <br><span class="text-primary">Camera 4K</span></h1>
<p class="lead text-muted mb-4">Capture every moment in stunning ultra-high definition.</p>
<a href="#" class="btn btn-dark btn-lg px-4 rounded-pill shadow">Order Today</a>
</div>
</div>
<div class="col-md-6 order-1 order-md-2 text-center p-4">
<img src="https://images.unsplash.com/photo-1526170315876-ef6d86f883a2?auto=format&fit=crop&w=600&q=80" class="img-fluid rounded-4 animate-image" alt="Product" style="max-height: 400px; width: 100%; object-fit: cover;">
</div>
</div>
</div>
</div>
<!-- Custom Slide Buttons -->
<button class="carousel-control-prev custom-nav-btn ms-3" type="button" data-bs-target="#ecommerceHeroCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon rounded-circle p-4 bg-white shadow-sm border" aria-hidden="true" style="filter: invert(1);"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next custom-nav-btn me-3" type="button" data-bs-target="#ecommerceHeroCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon rounded-circle p-4 bg-white shadow-sm border" aria-hidden="true" style="filter: invert(1);"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<style>
/* Carousel Item Styling */
.carousel-item {
background-color: #f8f9fa;
overflow: hidden;
}
/* Content Animations */
.animate-content {
animation: slideInLeft 0.8s ease-out;
}
.animate-image {
animation: fadeInScale 1s ease-out;
transition: transform 0.5s ease;
}
.carousel-item:hover .animate-image {
transform: scale(1.03);
}
/* Keyframes */
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Nav Button Styling */
.custom-nav-btn {
width: 5%;
opacity: 0;
transition: opacity 0.3s ease;
}
.carousel:hover .custom-nav-btn {
opacity: 1;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
background-size: 50%;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.display-3 {
font-size: 2.5rem;
}
.carousel-item {
min-height: auto;
}
.custom-nav-btn {
display: none;
}
}
</style>