How to use Glide with React

Adding a slider or carousel is one of the interesting thing but at the same its complex as well mainly the part where you need to manage the responsiveness. Sliders uses various methods like css transform to hide and show the current slide in the view port. In this article we will gonna look at how to use Glide with React.

What is Glide ?

Glide is a package which is developed using the ES6. It’s a dependency free package. It is super light weight and flexible. The size of this package is around 7KB.

It is developed using the JavaScript without using any external dependency. Thanks to developers this package is developed using the modular approach i.e if you need only selected functionality from this package you can do that and you can drop more weight in production builds.

It supports both Rollup and webpack. If you need to add themes and custom styling you can do that using css and scss.

Installation

The best way to install glide is using the npm. Which result in trouble free integration with webpack and rollup.

$ npm install @glidejs/glide

Usage

Let’s import Glide using there package.

import Glide from '@glidejs/glide'

new Glide('.glide').mount()

Need a few selected modules? Import and mount only needed components. In pair with a bundler’s tree-shaking it’s a great way to reduce the total weight your code!

If you need Breakpoints and controls you can also import them.

import Glide, { Controls, Breakpoints } from '@glidejs/glide/dist/glide.modular.esm'

new Glide('.glide').mount({ Controls, Breakpoints })

Example

Let’s make an dummy example to test the glide.

First of all we need to render our html part.

      <div class="glide">
        <div class="glide__arrows" data-glide-el="controls">
          <button class="glide__arrow glide__arrow--left" data-glide-dir="<">
            Prev
          </button>
        </div>
        <div class="glide__track" data-glide-el="track">
          <ul class="glide__slides">
            <li class="glide__slide">0</li>
            <li class="glide__slide">1</li>
            <li class="glide__slide">2</li>
          </ul>
        </div>
        <div class="glide__arrows" data-glide-el="controls">
          <button class="glide__arrow glide__arrow--right" data-glide-dir=">">
            Next
          </button>
        </div>
      </div>

Glide will understand our slide structure using the className. So, you can use same className like glide, glide_arrow, glide_slide etc.

Now import some stylesheets from glide for getting default UI.

// Required Core Stylesheet
import "@glidejs/glide/src/assets/sass/glide.core";

// Optional Theme Stylesheet
import "@glidejs/glide/src/assets/sass/glide.theme";

import package.

import Glide from "@glidejs/glide";

Now we just need to pass the parent className and few options.

new Glide(".glide", {
  peek: 50,
  perView: 2,
  type: "carousel"
}).mount();

You will be able to see output similar to this.

Checkout the whole demo on Codesandbox.

I hope you have learned how to use glide with React. Feel free to write down your comments.

How to use Swiper with React Apps