Web Designer Wall

Snippets Carousel

Bootstrap 5 Hero Carousel with Search Bar

A full-width fading photo carousel with a headline and a floating search card for pickup city, drop-off city and vehicle type.

Bootstrap 5 No jQuery Nov 2019 3.3K views 

<section class="rs-hero position-relative">
  <div id="heroCarousel" class="carousel slide carousel-fade h-100" data-bs-theme="dark" data-bs-interval="5000" aria-roledescription="carousel" aria-label="Featured destinations">
    <div class="carousel-indicators rs-ind"><button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button><button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button><button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button></div>
    <button type="button" class="rs-pause" id="rsPause" aria-label="Pause slideshow" aria-pressed="false"><svg class="i-pause" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/></svg><svg class="i-play" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5.5v13a1 1 0 0 0 1.5.9l10-6.5a1 1 0 0 0 0-1.8l-10-6.5A1 1 0 0 0 8 5.5z"/></svg></button>
    <div class="carousel-inner h-100">
        <div class="carousel-item active h-100" role="group" aria-roledescription="slide" aria-label="1 of 3">
          <img src="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?auto=format&fit=crop&w=1600&q=75" class="d-block w-100 h-100 object-fit-cover" alt="Yellow camper van driving along a desert road past red rock formations">
          <div class="rs-scrim"></div>
          <div class="carousel-caption text-start rs-caption">
            <span class="badge rounded-pill text-bg-light mb-3">Rides & rentals</span>
            <h1 class="display-4 fw-bolder mb-2">Road trips, sorted</h1>
            <p class="fs-5 mb-0">Pick up in one city, drop off in another.</p>
          </div>
        </div>
        <div class="carousel-item h-100" role="group" aria-roledescription="slide" aria-label="2 of 3">
          <img src="https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?auto=format&fit=crop&w=1600&q=75" class="d-block w-100 h-100 object-fit-cover" alt="Wooden boat bow on a turquoise alpine lake with mountains behind">
          <div class="rs-scrim"></div>
          <div class="carousel-caption text-start rs-caption">
            <span class="badge rounded-pill text-bg-light mb-3">Rides & rentals</span>
            <h2 class="display-4 fw-bolder mb-2">Weekend escapes</h2>
            <p class="fs-5 mb-0">Cars, vans and campers ready when you are.</p>
          </div>
        </div>
        <div class="carousel-item h-100" role="group" aria-roledescription="slide" aria-label="3 of 3">
          <img src="https://images.unsplash.com/photo-1494783367193-149034c05e8f?auto=format&fit=crop&w=1600&q=75" class="d-block w-100 h-100 object-fit-cover" alt="Empty straight highway under a bright blue sky with mountains in the distance">
          <div class="rs-scrim"></div>
          <div class="carousel-caption text-start rs-caption">
            <span class="badge rounded-pill text-bg-light mb-3">Rides & rentals</span>
            <h2 class="display-4 fw-bolder mb-2">Open road ahead</h2>
            <p class="fs-5 mb-0">Free cancellation on every booking.</p>
          </div>
        </div>
    </div>
    <button class="carousel-control-prev rs-ctrl" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev"><span class="rs-arrow"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg></span><span class="visually-hidden">Previous</span></button>
    <button class="carousel-control-next rs-ctrl" type="button" data-bs-target="#heroCarousel" data-bs-slide="next"><span class="rs-arrow"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></span><span class="visually-hidden">Next</span></button>
  </div>

  <div class="rs-search container">
    <form class="wdw-card p-3 p-lg-4" id="rideSearch" role="search" onsubmit="return false">
      <div class="row g-3 align-items-end">
        <div class="col-lg-3 col-md-6">
          <label for="pickup" class="form-label small fw-semibold wdw-muted">Pickup city</label>
          <input id="pickup" class="form-control" type="text" placeholder="City or airport" autocomplete="off">
        </div>
        <div class="col-lg-3 col-md-6">
          <label for="drop" class="form-label small fw-semibold wdw-muted">Drop-off city</label>
          <input id="drop" class="form-control" type="text" placeholder="City or airport" autocomplete="off">
        </div>
        <div class="col-lg-3 col-md-6">
          <label for="vehicle" class="form-label small fw-semibold wdw-muted">Vehicle</label>
          <select id="vehicle" class="form-select">
            <option selected>Any vehicle</option><option>Compact car</option><option>SUV</option><option>Camper van</option><option>Electric</option><option>Minibus</option>
          </select>
        </div>
        <div class="col-lg-3 col-md-6">
          <button type="submit" class="btn btn-primary rounded-pill w-100">
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>Search
          </button>
        </div>
      </div>
      <p class="small wdw-muted mt-3 mb-0" id="rideStatus" role="status" aria-live="polite">Free cancellation up to 24 hours before pickup.</p>
    </form>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Free to use in personal and commercial projects under the MIT license.

Related snippets

More Carousel snippets