Carousel

Glidejs is a dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more.

// Css
<link rel="stylesheet" href="css/vendor/glide.core.min.css" />

// Javascript
<script src="js/vendor/glide.min.js"></script>
<script src="js/cs/glide.custom.js"></script>

if (document.querySelector('#glideBasic')) {
  new GlideCustom(
    document.querySelector('#glideBasic'),
    {
      gap: 0,
      rewind: false,
      bound: true,
      perView: 6,
      breakpoints: {
        400: { perView: 1 },
        1000: { perView: 2 },
        1400: { perView: 3 },
        1900: { perView: 5 },
        3840: { perView: 6 },
      },
    },
    true,
  ).mount();
}

<div class="glide" id="glideBasic">
  <!-- Glide Carousel Content Start -->
  <div class="glide__track" data-glide-el="track">
    <div class="glide__slides">
      <div class="glide__slide">
        <div class="card mb-5">
          <img src="img/product/small/product-3.webp" class="card-img-top" alt="card image" />
          <div class="card-body">
            <h5 class="card-title">Card title 1</h5>
            <p class="card-text">Liquorice caramels apple pie chupa.</p>
          </div>
        </div>
      </div>
      <div class="glide__slide">
        <div class="card mb-5">
          <img src="img/product/small/product-3.webp" class="card-img-top" alt="card image" />
          <div class="card-body">
            <h5 class="card-title">Card title 2</h5>
            <p class="card-text">Liquorice caramels apple pie chupa.</p>
          </div>
        </div>
      </div>
      <div class="glide__slide">
        <div class="card mb-5">
          <img src="img/product/small/product-3.webp" class="card-img-top" alt="card image" />
          <div class="card-body">
            <h5 class="card-title">Card title 3</h5>
            <p class="card-text">Liquorice caramels apple pie chupa.</p>
          </div>
        </div>
      </div>
      <div class="glide__slide">
        <div class="card mb-5">
          <img src="img/product/small/product-3.webp" class="card-img-top" alt="card image" />
          <div class="card-body">
            <h5 class="card-title">Card title 4</h5>
            <p class="card-text">Liquorice caramels apple pie chupa.</p>
          </div>
        </div>
      </div>
      <div class="glide__slide">
        <div class="card mb-5">
          <img src="img/product/small/product-3.webp" class="card-img-top" alt="card image" />
          <div class="card-body">
            <h5 class="card-title">Card title 5</h5>
            <p class="card-text">Liquorice caramels apple pie chupa.</p>
          </div>
        </div>
      </div>
      <div class="glide__slide">
        <div class="card mb-5">
          <img src="img/product/small/product-3.webp" class="card-img-top" alt="card image" />
          <div class="card-body">
            <h5 class="card-title">Card title 6</h5>
            <p class="card-text">Liquorice caramels apple pie chupa.</p>
          </div>
        </div>
      </div>
      <div class="glide__slide">
        <div class="card mb-5">
          <img src="img/product/small/product-3.webp" class="card-img-top" alt="card image" />
          <div class="card-body">
            <h5 class="card-title">Card title 7</h5>
            <p class="card-text">Liquorice caramels apple pie chupa.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Glide Carousel Content End -->

  <!-- Glide Carousel Controls Start -->
  <div class="text-center">
    <span class="glide__arrows slider-nav" data-glide-el="controls">
      <button class="btn btn-icon btn-icon-only btn-outline-primary" data-glide-dir="<">
        <i data-acorn-icon="chevron-left"></i>
      </button>
    </span>
    <span class="glide__bullets" data-glide-el="controls[nav]"></span>
    <span class="glide__arrows slider-nav" data-glide-el="controls">
      <button class="btn btn-icon btn-icon-only btn-outline-primary" data-glide-dir=">">
        <i data-acorn-icon="chevron-right"></i>
      </button>
    </span>
  </div>
  <!-- Glide Carousel Controls End -->
</div>

You may find more examples in Interface.Plugins.Carousel.html file which is initialized by js/plugins/carousels.js. Also, it might be helpfull to take a look at js/cs/glide.custom.js.