Best Carousel

<!-- Hero Split Carousel -->
<section class="container py-5">
  <div id="premiumHeroCarousel" class="carousel slide carousel-fade shadow-lg rounded-5 overflow-hidden" data-bs-ride="carousel">
    <!-- Progress Indicators -->
    <div class="carousel-indicators mb-4">
      <button type="button" data-bs-target="#premiumHeroCarousel" data-bs-slide-to="0" class="active rounded-pill" style="width: 30px; height: 6px;"></button>
      <button type="button" data-bs-target="#premiumHeroCarousel" data-bs-slide-to="1" class="rounded-pill" style="width: 30px; height: 6px;"></button>
      <button type="button" data-bs-target="#premiumHeroCarousel" data-bs-slide-to="2" class="rounded-pill" style="width: 30px; height: 6px;"></button>
    </div>

    <div class="carousel-inner">
      <!-- Slide 1: Modern Tech -->
      <div class="carousel-item active" data-bs-interval="5000">
        <div class="row g-0 vh-75 min-vh-500">
          <div class="col-lg-6 d-flex align-items-center bg-white p-5">
            <div class="px-md-4 animate-up">
              <span class="badge bg-primary-subtle text-primary px-3 py-2 rounded-pill mb-3 fw-bold">Innovation 2024</span>
              <h1 class="display-2 fw-black text-dark mb-4">Smart <span class="text-primary text-gradient">Solutions</span></h1>
              <p class="lead text-secondary mb-5">Experience the next generation of seamless living with our integrated AI ecosystem designed for your comfort.</p>
              <div class="d-flex flex-wrap gap-3">
                <a href="#" class="btn btn-primary btn-lg px-5 rounded-pill shadow-lg">Get Started</a>
                <a href="#" class="btn btn-outline-dark btn-lg px-4 rounded-pill">Watch Video <i class="bi bi-play-circle ms-1"></i></a>
              </div>
            </div>
          </div>
          <div class="col-lg-6 position-relative overflow-hidden card-img-zoom">
            <img src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&fit=crop&q=80&w=1200" class="w-100 h-100 object-fit-cover" alt="Modern Tech">
          </div>
        </div>
      </div>

      <!-- Slide 2: Design Focused -->
      <div class="carousel-item" data-bs-interval="5000">
        <div class="row g-0 vh-75 min-vh-500">
          <div class="col-lg-6 d-flex align-items-center bg-dark text-white p-5">
            <div class="px-md-4">
              <h1 class="display-2 fw-black mb-4">Ultra <span class="text-info">Minimal</span></h1>
              <p class="lead opacity-75 mb-5">Minimalist design meets maximum performance. Beautifully crafted hardware that fits perfectly into your lifestyle.</p>
              <a href="#" class="btn btn-info text-white btn-lg px-5 rounded-pill shadow">Explore Design</a>
            </div>
          </div>
          <div class="col-lg-6 position-relative overflow-hidden card-img-zoom">
            <img src="https://images.unsplash.com/photo-1494438639946-1ebd1d20bf85?auto=format&fit=crop&q=80&w=1200" class="w-100 h-100 object-fit-cover" alt="Design Focused">
          </div>
        </div>
      </div>

      <!-- Slide 3: Performance -->
      <div class="carousel-item" data-bs-interval="5000">
        <div class="row g-0 vh-75 min-vh-500">
          <div class="col-lg-6 d-flex align-items-center bg-light p-5">
            <div class="px-md-4">
              <h1 class="display-2 fw-black text-dark mb-4">Elite <span class="text-danger">Power</span></h1>
              <p class="lead text-secondary mb-5">Unmatched processing speeds for creators, developers, and visionaries built on robust architecture.</p>
              <button class="btn btn-danger btn-lg px-5 rounded-pill shadow">Try Beta Now</button>
            </div>
          </div>
          <div class="col-lg-6 position-relative overflow-hidden card-img-zoom">
            <img src="https://images.unsplash.com/photo-1593642702821-c8da6771f0c6?auto=format&fit=crop&q=80&w=1200" class="w-100 h-100 object-fit-cover" alt="Performance">
          </div>
        </div>
      </div>
    </div>

    <!-- Float Nav Controls -->
    <button class="carousel-control-prev w-auto ms-4" type="button" data-bs-target="#premiumHeroCarousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon bg-white text-dark shadow rounded-circle p-4 border" aria-hidden="true" style="filter: invert(1);"></span>
    </button>
    <button class="carousel-control-next w-auto me-4" type="button" data-bs-target="#premiumHeroCarousel" data-bs-slide="next">
      <span class="carousel-control-next-icon bg-white text-dark shadow rounded-circle p-4 border" aria-hidden="true" style="filter: invert(1);"></span>
    </button>
  </div>
</section>

<style>
  /* Custom Typography */
  .fw-black {
    font-weight: 900;
    letter-spacing: -2px;
  }

  .text-gradient {
    background: linear-gradient(45deg, #0d6efd, #0dcaf0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Container Sizing */
  .vh-75 {
    height: 75vh;
  }

  .min-vh-500 {
    min-height: 550px;
  }

  /* Animations */
  .carousel-item.active .animate-up {
    animation: heroUp 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  }

  .carousel-item.active .card-img-zoom img {
    animation: imgZoom 6s linear infinite alternate;
  }

  @keyframes heroUp {
    from {
      opacity: 0;
      transform: translateY(40px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes imgZoom {
    from {
      transform: scale(1);
    }

    to {
      transform: scale(1.1);
    }
  }

  /* Slick Controls */
  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    background-size: 40%;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .carousel-control-prev:hover .carousel-control-prev-icon,
  .carousel-control-next:hover .carousel-control-next-icon {
    transform: scale(1.2);
    background-color: #0d6efd !important;
    filter: invert(0) !important;
    border-color: #0d6efd !important;
  }

  /* Indicators Styling */
  .carousel-indicators .active {
    background-color: #0d6efd;
  }

  /* Mobile Compatibility */
  @media (max-width: 991px) {
    .vh-75 {
      height: auto;
    }

    .col-lg-6 {
      text-align: center;
    }

    .d-flex {
      justify-content: center;
    }

    .display-2 {
      font-size: 3rem;
    }

    .min-vh-500 {
      min-height: auto;
    }

    .carousel-control-prev,
    .carousel-control-next {
      display: none;
    }
  }

</style>