Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    @glidejs/glidepublic

    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 ~22kb (~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.

    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.

    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.

    Maintainers

    License

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

    install

    npm i @glidejs/glide

    Downloadslast 7 days

    275

    version

    3.0.1

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar