Glide.js is a simple and easy-to-use slider plugin. Because it can be introduced easily, it is recommended for those who want to add an attractive slider to their website.
In this article, we will introduce how to display a slider using the Glide.js plugin, along with specific code examples.

Contents
  1. What is the Glide.js Plugin?
  2. CSS Description
  3. HTML Description
  4. JavaScript Description
  5. Slider Display Demo Page Using the Glide.js Plugin
  6. Source: Glide.js | A dependency-free JavaScript ES6 slider and carousel
  7. Conclusion

What is the Glide.js Plugin?

Glide.js is a lightweight JavaScript slider and carousel library with no dependencies. Despite its simple structure, it is feature-rich and highly customizable, making it widely used in many projects.

CSS Description

First, load the glide.css file. Please add the following code to the head section of your HTML.

<link rel="stylesheet" href="glide.css">
<style>
body {
  background: #000000;
  font-size: 16px;
  color: #ffffff;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 1.6em;
  padding: 20px 0;
  position: relative;
}
</style>

　
This stylesheet sets the background color of the entire page to black and defines the font size and color. It also adjusts the styling of the headings.

HTML Description

Next, write the HTML structure for the slider.
In this HTML structure, within the entire slider area (id=”intro”), prepare the slide area (data-glide-el=”track”), left and right arrows (data-glide-el=”controls”), and navigation bullet buttons (data-glide-el=”controls[nav]”).

<h1>Slider Display Using the Glide.js Plugin</h1>

<div id="intro" class="slider glide">

  <div class="slider__track glide__track" data-glide-el="track">
    <ul class="slider__slides glide__slides">
        <li class="slider__frame glide__slide">0</li>
        <li class="slider__frame glide__slide">1</li>
        <li class="slider__frame glide__slide">2</li>
        <li class="slider__frame glide__slide">3</li>
        <li class="slider__frame glide__slide">4</li>
        <li class="slider__frame glide__slide">5</li>
        <li class="slider__frame glide__slide">6</li>
        <li class="slider__frame glide__slide">7</li>
        <li class="slider__frame glide__slide">8</li>
        <li class="slider__frame glide__slide">9</li>
    </ul>
  </div>

  <div data-glide-el="controls">
    <button class="slider__arrow slider__arrow--prev glide__arrow glide__arrow--prev" data-glide-dir="<">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
        <path d="M0 12l10.975 11 2.848-2.828-6.176-6.176H24v-3.992H7.646l6.176-6.176L10.975 1 0 12z"/>
      </svg>
    </button>

    <button class="slider__arrow slider__arrow--next glide__arrow glide__arrow--next" data-glide-dir=">">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
        <path d="M13.025 1l-2.847 2.828 6.176 6.176h-16.354v3.992h16.354l-6.176 6.176 2.847 2.828 10.975-11z"/>
      </svg>
    </button>
  </div>

  <div class="slider__bullets glide__bullets" data-glide-el="controls[nav]">
      <button class="slider__bullet glide__bullet" data-glide-dir="=0"></button>
      <button class="slider__bullet glide__bullet" data-glide-dir="=1"></button>
      <button class="slider__bullet glide__bullet" data-glide-dir="=2"></button>
      <button class="slider__bullet glide__bullet" data-glide-dir="=3"></button>
      <button class="slider__bullet glide__bullet" data-glide-dir="=4"></button>
      <button class="slider__bullet glide__bullet" data-glide-dir="=5"></button>
      <button class="slider__bullet glide__bullet" data-glide-dir="=6"></button>
      <button class="slider__bullet glide__bullet" data-glide-dir="=7"></button>
      <button class="slider__bullet glide__bullet" data-glide-dir="=8"></button>
      <button class="slider__bullet glide__bullet" data-glide-dir="=9"></button>
  </div>

</div>

JavaScript Description

Load the Glide.js file from the CDN ( https://unpkg.com/@glidejs/glide ). Then write new Glide(‘#intro’, {options}). In the options, set the number of slides, focus position, breakpoints, and more.

<script src="https://unpkg.com/@glidejs/glide"></script>
<script>
document.addEventListener('DOMContentLoaded', function (event) {
  var glide = new Glide('#intro', {
      type: 'carousel',
      perView: 4,
      focusAt: 'center',
      breakpoints: {
        800: {
          perView: 2
        },
        480: {
          perView: 1
        }
      }
  })

  glide.mount();
})
</script>

Slider Display Demo Page Using the Glide.js Plugin

You can check the demo page of the slider display using the Glide.js plugin from the link below.

Slider Display Demo Page Using the Glide.js Plugin

Source: Glide.js | A dependency-free JavaScript ES6 slider and carousel

Glide.js | A dependency-free JavaScript ES6 slider and carousel

Conclusion

By following the steps above, you can implement a slider display using the Glide.js plugin. Use this easy-to-integrate plugin to add dynamic content to your website.

　
*If you reuse this code, please do so at your own responsibility.
Please do not reuse the Google Analytics tag included in the head tag of the demo page.*

Glide.js slider