Web Designer Wall

Snippets Image

Bootstrap 5 Image Slider with Arrows and Dots

A photo slider with a caption scrim, round arrow buttons and pill-style indicators that autoplays and pauses on hover and focus.

Bootstrap 5 No jQuery Jan 2020 2.7K views 

<section class="wdw-stage">
  <div class="container" style="max-width: 980px;">
    <div class="text-center mb-4">
      <span class="wdw-eyebrow">Gallery</span>
      <h1 class="h2 wdw-heading mt-1 mb-0">Featured destinations</h1>
    </div>
    <div id="heroSlider" class="carousel slide hs-slider wdw-card overflow-hidden" data-bs-ride="carousel" data-bs-interval="5000" aria-roledescription="carousel" aria-label="Featured destinations">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#heroSlider" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#heroSlider" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#heroSlider" data-bs-slide-to="2" aria-label="Slide 3"></button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?auto=format&fit=crop&w=1400&q=70" class="d-block w-100" alt="Snow-capped mountain peaks above the clouds">
          <div class="hs-caption"><span class="badge text-bg-light rounded-pill mb-2">01 / 03</span><h2 class="h4 fw-bold mb-1">Above the clouds</h2><p class="mb-0 small opacity-75">Alpine ridges at first light.</p></div>
        </div>
        <div class="carousel-item">
          <img src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=1400&q=70" class="d-block w-100" alt="Sunrise over a misty valley">
          <div class="hs-caption"><span class="badge text-bg-light rounded-pill mb-2">02 / 03</span><h2 class="h4 fw-bold mb-1">Valley sunrise</h2><p class="mb-0 small opacity-75">Mist rolling through quiet hills.</p></div>
        </div>
        <div class="carousel-item">
          <img src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=1400&q=70" class="d-block w-100" alt="Sunlight through a green forest">
          <div class="hs-caption"><span class="badge text-bg-light rounded-pill mb-2">03 / 03</span><h2 class="h4 fw-bold mb-1">Forest light</h2><p class="mb-0 small opacity-75">Trails worth getting lost on.</p></div>
        </div>
      </div>
      <button class="hs-nav hs-prev" type="button" data-bs-target="#heroSlider" data-bs-slide="prev" aria-label="Previous slide">
        <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 6l-6 6 6 6"/></svg>
      </button>
      <button class="hs-nav hs-next" type="button" data-bs-target="#heroSlider" data-bs-slide="next" aria-label="Next slide">
        <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 6l6 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.

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

Related snippets

More image snippets