Slider with thumbnails - Glide JS & Bootstrap 5

index.html

<div class="container py-5">
  <div class="row">
    <div class="col-md-12">
      <h1 class="text-center mb-4">Slider with thumbnails</h1>
      <!-- CAROUSEL -->
      <div class="glide">

        <div class="glide__track mb-4" data-glide-el="track">
          <div class="glide__slides">
            <div class="glide__slide">
              <img src="https://images.pexels.com/photos/9638689/pexels-photo-9638689.jpeg" class="w-100" alt="">
            </div>
            <div class="glide__slide">
              <img src="https://images.pexels.com/photos/1509582/pexels-photo-1509582.jpeg" class="w-100" alt="">
            </div>
            <div class="glide__slide">
              <img src="https://images.pexels.com/photos/2113566/pexels-photo-2113566.jpeg" class="w-100" alt="">
            </div>
            <div class="glide__slide">
              <img src="https://images.pexels.com/photos/2258536/pexels-photo-2258536.jpeg" class="w-100" alt="">
            </div>
            <div class="glide__slide">
              <img src="https://images.pexels.com/photos/23547/pexels-photo.jpg" class="w-100" alt="">
            </div>
          </div>
        </div>

        <!-- Previews (Glide bullets control) -->
        <div class="row">
          <div class="col-md" data-glide-el="controls[nav]">
            <a data-glide-dir="=0">
              <img src="https://images.pexels.com/photos/9638689/pexels-photo-9638689.jpeg" class="w-100" alt="">
            </a>
          </div>
          <div class="col-md" data-glide-el="controls[nav]">
            <a data-glide-dir="=1">
              <img src="https://images.pexels.com/photos/1509582/pexels-photo-1509582.jpeg" class="w-100" alt="">
            </a>
          </div>
          <div class="col-md" data-glide-el="controls[nav]">
            <a data-glide-dir="=2">
              <img src="https://images.pexels.com/photos/2113566/pexels-photo-2113566.jpeg" class="w-100" alt="">
            </a>
          </div>
          <div class="col-md" data-glide-el="controls[nav]">
            <a data-glide-dir="=3">
              <img src="https://images.pexels.com/photos/2258536/pexels-photo-2258536.jpeg" class="w-100" alt="">
            </a>
          </div>
          <div class="col-md" data-glide-el="controls[nav]">
            <a data-glide-dir="=4">
              <img src="https://images.pexels.com/photos/23547/pexels-photo.jpg" class="w-100" alt="">
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

script.js

let glide = new Glide(".glide", {
  type: "carousel",
  perView: 1,
  startAt: 0,
  focusAt: "center",
  autoplay: 5000 //Optional (5 seg)
}).mount();

scripts

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/glide.min.js"></script>

slider-with-thumbnails-glide-js-bootstrap-5.markdown

Slider with thumbnails - Glide JS & Bootstrap 5

This is a slider made with Glide js in his last version and using some classes of bootstrap 5, we don't use any CSS!

A Pen by Josue Osorio on CodePen.

License.

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/css/glide.core.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/css/glide.theme.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />