Web Designer Wall

Snippets Animation

Bootstrap 5 Image Carousel with Swipe Support

A photo carousel with caption overlays on a gradient scrim, pill indicators, arrow buttons and drag or swipe navigation that also responds to the keyboard.

Bootstrap 5 No jQuery Jan 2020 2.5K views 

<section class="wdw-stage">
  <div class="container" style="max-width:960px">
    <div class="text-center mb-4"><span class="wdw-eyebrow">Gallery</span><h1 class="wdw-heading h2 mt-1 mb-1">Swipe through the season</h1><p class="wdw-muted mb-0">Drag, swipe, use the arrows or your keyboard.</p></div>
    <div id="swipeGallery" class="carousel slide gal wdw-card overflow-hidden" data-bs-ride="false" tabindex="0" aria-roledescription="carousel" aria-label="Photo gallery">
      <span class="gal-count" aria-hidden="true"><b id="galNow">01</b> / 04</span>
      <div class="carousel-indicators"><button type="button" data-bs-target="#swipeGallery" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button><button type="button" data-bs-target="#swipeGallery" data-bs-slide-to="1" aria-label="Slide 2"></button><button type="button" data-bs-target="#swipeGallery" data-bs-slide-to="2" aria-label="Slide 3"></button><button type="button" data-bs-target="#swipeGallery" data-bs-slide-to="3" aria-label="Slide 4"></button></div>
      <div class="carousel-inner">
        <div class="carousel-item active" role="group" aria-roledescription="slide" aria-label="1 of 4">
          <img src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=1400&q=80" class="gal-img" alt="Sunlight through a green forest" draggable="false">
          <div class="gal-scrim"></div>
          <div class="gal-caption text-white"><span class="badge rounded-pill gal-badge mb-2">Forest light</span><h2 class="h3 fw-bold mb-1">Early morning walks</h2><p class="mb-0 opacity-75 d-none d-sm-block">Sunbeams filter through the canopy.</p></div>
        </div>
        <div class="carousel-item" role="group" aria-roledescription="slide" aria-label="2 of 4">
          <img src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=1400&q=80" class="gal-img" alt="Mountain lake at sunrise" draggable="false" loading="lazy">
          <div class="gal-scrim"></div>
          <div class="gal-caption text-white"><span class="badge rounded-pill gal-badge mb-2">Alpine dawn</span><h2 class="h3 fw-bold mb-1">First light on the ridge</h2><p class="mb-0 opacity-75 d-none d-sm-block">A calm lake mirrors the peaks.</p></div>
        </div>
        <div class="carousel-item" role="group" aria-roledescription="slide" aria-label="3 of 4">
          <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1400&q=80" class="gal-img" alt="Green valley under a colourful sky" draggable="false" loading="lazy">
          <div class="gal-scrim"></div>
          <div class="gal-caption text-white"><span class="badge rounded-pill gal-badge mb-2">Open valley</span><h2 class="h3 fw-bold mb-1">Wide skies, quiet roads</h2><p class="mb-0 opacity-75 d-none d-sm-block">Golden hour over rolling hills.</p></div>
        </div>
        <div class="carousel-item" role="group" aria-roledescription="slide" aria-label="4 of 4">
          <img src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&w=1400&q=80" class="gal-img" alt="Misty hills at dawn" draggable="false" loading="lazy">
          <div class="gal-scrim"></div>
          <div class="gal-caption text-white"><span class="badge rounded-pill gal-badge mb-2">Misty hills</span><h2 class="h3 fw-bold mb-1">Fog in the hollows</h2><p class="mb-0 opacity-75 d-none d-sm-block">Layers of hills fade into the haze.</p></div>
        </div>
      </div>
      <button class="gal-btn gal-prev" type="button" data-bs-target="#swipeGallery" data-bs-slide="prev" aria-label="Previous photo"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg></button>
      <button class="gal-btn gal-next" type="button" data-bs-target="#swipeGallery" data-bs-slide="next" aria-label="Next photo"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></button>
    </div>
  </div>
</section>

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

Related snippets

More animation snippets