/glide

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

Primary LanguageJavaScriptMIT LicenseMIT

glide.js

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

Build Status

What can convince you:

  • Dependency-free. Everything included, ready for action.
  • Lightweight. Only ~23kb (~7kb gzipped) with every functionality on board.
  • Modular. Remove unused modules and drop script weight even more.
  • Extendable. Plug-in your own modules with additional functionalities.
  • Bundlers ready. Using Rollup or Webpack? We have your back.

Documentation

Visit glidejs.com for documentation.

Looking for old documentation? Wiki contains archived documentation of Glide.js in version ^2.0.0.

Donation

Glide.js is an open source project licensed under the MIT license. It's completely free to use. However, it would be great if you buy me a cup of coffee once in a while to keep me awake :)

Getting started

Pull-in a latest version with NPM ...

npm install @glidejs/glide

... provide <link> to the required core stylesheet. You can also optionally add an included theme stylesheet ...

<!-- Required Core stylesheet -->
<link rel="stylesheet" href="node_modules/@glidejs/glide/dist/css/glide.core.min.css">

<!-- Optional Theme stylesheet -->
<link rel="stylesheet" href="node_modules/@glidejs/glide/dist/css/glide.theme.min.css">

... then, prepare a little bit of necessary markup ...

<div class="glide">
  <div data-glide-el="track" class="glide__track">
    <ul class="glide__slides">
      <li class="glide__slide"></li>
      <li class="glide__slide"></li>
      <li class="glide__slide"></li>
    </ul>
  </div>
</div>

... and finally, initialize and mount a Glide.

import Glide from '@glidejs/glide'

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

Need a few selected modules? Import and mount only what you need.

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

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

Contributing

The issue channel is especially for improvement proposals and bug reporting. If you have implementing problems, please write on StackOverflow with glidejs tag.

Browser Support

  • IE 11+
  • Edge
  • Chrome 10+
  • Firefox 10+
  • Opera 15+
  • Safari 5.1+
  • Safari iOS 9+

Building

Build using NPM scripts. The following scripts are available:

  • build:css - Outputs CSS files from SASS files.
  • build:js - Outputs all destination variants of the script.
  • build - Comprehensively builds the entire library.
  • test - Runs complete test suite.
  • lint - Lints library JavaScript files.

Credits

License

Copyright (c) 2014-present, Jędrzej Chałubek. Licensed under the terms of the MIT License.