Get started with glider-js CDN

MIT licensed

Glider.js is a lightweight library for creating touch-friendly, infinite carousels and galleries.

Tags:
  • carousel
  • scrolling
  • list
  • paging

Stable version

Copied!

How to start using glider-js CDN


<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/glider.min.css">
  <script src="https://cdn.cdnhub.io/glider-js/1.7.8/glider.min.js"></script>
  <style>
    .carousel {
      max-width: 100%;
    }
  </style>
</head>
<body>
  <div class="carousel" data-glider-dir="ltr" data-glider-per-view="3" data-glider-scroll-lock-threshold="20px">
    <div class="glider__track" style="transform: translate3d(0px, 0px, 0px, 0px); transition: all 0.2s ease 0s; width: 3000px;">
      <ul class="glider__list">
        <li class="glider__slide">Slide 1</li>
        <li class="glider__slide">Slide 2</li>
        <li class="glider__slide">Slide 3</li>
        <li class="glider__slide">Slide 4</li>
        <li class="glider__slide">Slide 5</li>
        <li class="glider__slide">Slide 6</li>
        <li class="glider__slide">Slide 7</li>
        <li class="glider__slide">Slide 8</li>
      </ul>
    </div>
  </div>
  <script>
    new Glider('.carousel', {
      slidesToShow: 3,
      slidesToScroll: 1,
      dots: false,
      arrows: {
        prev: '.glider-prev',
        next: '.glider-next'
      },
      responsive: [
        {
          // screens smaller than 768px
          breakpoint: 768,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
      ]
    }).refresh();
  </script>
  <button class="glider-prev">Previous</button>
  <button class="glider-next">Next</button>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!

All versions