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

Overview

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.

Comments
  • Add pagination feature

    Add pagination feature

    Hey @jedrzejchalubek, i added the page navigation features as requested in #252

    The syntax was slightly changed from the suggestion.

    |> pages to the right |< pages to the left

    Additionally i added the waitForTransition flag which allows developers to decide if they want to create an artificial input delay or not.

    Let me know what you think, ill gladly update the documentation when this features passes your requirements.

    Todos

    • [x] Fix pagination in combination with carousel
    opened by omares 25
  • Infinite Carousel cloned element lose eventlisteners.(example video included)

    Infinite Carousel cloned element lose eventlisteners.(example video included)

    Please see my recording Video Infinite Carousel cloned element lose event listeners. My workaround is not using carouse but slider. Which is ok by me. I use Glide along with react. Maybe I did something wrong? The code is nasty, I'm not going to put it here, feel free to close my issue. But Glide is the only best carousel currently in modern JS world. Other react carousel option has too many bugs. I've tried.

    opened by rockmandash 16
  • Fade instead of Slide

    Fade instead of Slide

    This slider is great! Simple with great selectors. I want to work on making it fade instead of slide....I know. It's called a slider, but for some reason a lot of people want it to fade. So want to see if I can get a fade transition instead. Someone who might be able to get this working faster than I could thought. Thanks.

    feature request 
    opened by scottcarlton 15
  • Link inside slide are flickering

    Link inside slide are flickering

    Hi

    So, basically I use css3 transition in all <a> tags, to give nice effect on mouseover and other simple actions. I just noticed that after swipe (drag) the slider, all links inside slides are flickering. This is because the glide script is removing the "href" in all <a> tags on drag event and put it back when we release the drag. I can fix this by adding these lines in my CSS

    
    	a:not([href]),
    	a[href] {
    		-webkit-transition: none !important;
    		transition: none !important;
    	}
    
    

    yep, issues is fixed, but the "nice effect" on mouseover also disappear LOL

    Any idea how to fix this without removing the transitions?

    Many thanks!

    opened by webinpixels 14
  • Auto populate bullets

    Auto populate bullets

    Assume there is a reason that the bullets have to be hard coded, rather than generated based on how many slides there are? Planning to use with a CMS where slides could be added or removed by a user. Fairly simple to implement my end, just wondered if you'd considered building it in?

    feature request extension candidate 
    opened by projodesign 14
  • Breakpoints apply to all sliders, not just the one specified

    Breakpoints apply to all sliders, not just the one specified

    the breakpoint rules are applied to all sliders on the page, not just the one it's a part of. e.g. glide1 should show 3 on desktop and 1 on mobile whilst glide2 should show 6 on desktop and 2 on mobile. However, on mobile they both show 2.

    new Glide('#glide1', {
    	type: 'carousel',
    	perView: 3,
    	breakpoints: {
    		800: {
    			perView: 1
    		}
    	}
    }).mount();
    new Glide('#glide2', {
    	type: 'carousel',
    	perView: 6,
    	breakpoints: {
    		800: {
    			perView: 2
    		}
    	}
    }).mount();
    

    PS - I'm using Glide 3.0

    bug 
    opened by mattisherwood 14
  • Slides not 100% Width

    Slides not 100% Width

    Hello! This topic has kind of been answered here (https://github.com/jedrzejchalubek/Glide.js/issues/71), but since i don't really know javascript, i didn't understand exactly how and where to put the .reinit() code.

    Here is where i am having the issue: http://helenaswax.com/2015/

    As you can see, the slides are stacking to the left, but as soon as you change the browser window size, it adjusts perfectly. Could you help me with that?

    Thanks in advance!

    invalid 
    opened by idesigns-studio 13
  • Support for Web Components

    Support for Web Components

    We are in troubles using Glide inside a Web Component, with LitElement. Should be good in general if the library supports the possibility of place his HTML structure inside <slot> and so dealing with Shadow DOM and other Web Components features. Rif:

    • https://developer.mozilla.org/en-US/docs/Web/Web_Components
    • https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement
    • https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot

    Acctually the library seems to not support the presence of <slot> inside.

    opened by ghost 12
  • Make slider keyboard accessible

    Make slider keyboard accessible

    Hi, my marketer liked your slider, and asked me to implement it (in a pretty basic way, nothing fancy).

    The issue is that this isn't keyboard-accessible, which at the very least would prevent some companies and agencies from being able to use your slider. As a developer I like to ensure some basic accessibility too anyways...

    So I've modified our copy of the slider to turn all the clickables into button elements (for the bullets, these are still inside LI elements). These automatically accept keyboard focus, and trigger click events with both enter and spacebar keys. In addition, I've added :focus styles to the :hover styles.

    Some browsers put focus on elements clicked with the mouse, and usually the designers don't want those :focus styles to appear then, so we also happen to use a 2-line mouse-detection script so we can say "only show focus styles when no mouse detected" (could also add touch(start/end) to this as well).

    Would you like a pull request?

    feature request 
    opened by StommePoes 11
  • Drag & drop is broken

    Drag & drop is broken

    I just noticed that there's an issue even on the documentation page with the drag & drop.

    The element is lost and can't be moved after some mouse interactions. I'm not sure on which exact behaviour this is happening.

    Is this issue already known? For me, it looks like it's quite critical and a basic behaviour which sould work. I can dig into the code and debug. But first I wanted to hear if there are already some ideas on the issue.

    Browser: Chrome 71.0 (but I tried also on other browsers) OS: MacOS 10.14.2

    ezgif com-video-to-gif

    bug 
    opened by marcwieland95 10
  • Sizes.width uses root width

    Sizes.width uses root width

    Sizes sets the width as Components.Html.root.offsetWidth, is that right or should it be using Components.Html.track.offsetWidth? Sizes.width is used to calculate Sizes.slideWidth, in my case my track isn't the same width as the root container, so it's messing up the slide widths.

    By the way, awesome work, the components have made it really easy to extend and fit my use case 🎉

    opened by djgadd 10
  • Fix transition

    Fix transition

    Transition is not being disabled, at the time of screen resize and the rewind of slide from last to first. Glide is not enabled after the transition is disabled.

    opened by desvu 0
  • TypeError: _glide.default is not a constructor

    TypeError: _glide.default is not a constructor

    I had make a slider with GlideJS. This widget is working fine. But when I am writing the jest test. My Test is failing, it's saying TypeError: Cannot read property 'querySelector' of undefined. Here is the complete error while I am playing the test case.

            TypeError: Cannot read property 'querySelector' of undefined
    
          55 |     const slider = new Glide(sliderRef.current, options);
          56 |
        > 57 |     slider.mount();
             |            ^
          58 |   }, [options]);
          59 |
          60 |   const handleOnMouseEnter = () => setNavigationVisible(true);
    

    Here is the Test Suite which I write down.

        import React from 'react';
        import renderer from 'react-test-renderer';
        import Widget from './Widget';
        
        const mockArray = [
          { title: 'Mock Title 1', completed: false },
          { title: 'Mock Title 2', completed: false },
          { title: 'Mock Title 3', completed: false },
        ];
        describe('Widget', () => {
          it('renders Widget according to design', () => {
            const component = renderer.create(
              <Widget lessons={mockArray} title={'mock title'} />
            );
            const tree = component.toJSON();
        
            expect(tree).toMatchSnapshot();
          });
        });
    
    
    opened by arslanalidev 0
  • Delay in the rendering of cloned slides on wide screens when number of clones exceeds the number of slides in DOM

    Delay in the rendering of cloned slides on wide screens when number of clones exceeds the number of slides in DOM

    I'm running into an issue, mostly on screens above 1800px or so, where, if the number of slides in the DOM is significantly less than the number of slides specified in a particular 'perView' config, as the carousel auto advances, there are gaps where the next set of cloned slides does not render. Ive tested this in a codepen (https://codepen.io/takmais/pen/MWXqXeE?editors=1010) with the most basic implementation and i've seen this behavior exhibited. Let's say you have 5 slides in the DOM, but in your glide config, you specify 10. After a while, after the carousel has auto advanced a few times, there will be gaps on the right where the last few cloned slides do not render for several seconds Screen Shot 2022-11-30 at 2 06 07 PM

    opened by takmais 0
  • Too complicated.

    Too complicated.

    I downloaded it, and unzipped it...

    Have no idea what I'm looking at. It's just a bunch of files.

    Try making it less complicated. It might gain more traction.

    opened by scottonanski 3
  • Is it possible to prevent an image moving when dragging?

    Is it possible to prevent an image moving when dragging?

    I have dragThreshold enabled and everything works great. I just don't want the image to move when dragging, i'd like it to instantly switch to the next image instead of having the image move slightly beforehand. This is causing the next slide to be anchored to where the previous slide moved to before it moved to the next slide.

    Is this possible?

    opened by javedbartlett 4
  • Carousel perfectly locally but doesn't work when deployed to vercel

    Carousel perfectly locally but doesn't work when deployed to vercel

    I'm trying to implement a carousel slider in react. It works fine locally but doesn't work on vercel and I'm not sure why.

    ` import React, { useEffect } from 'react' import Glide from "@glidejs/glide"; import "@glidejs/glide/dist/css/glide.core.min.css" import "@glidejs/glide/dist/css/glide.theme.min.css"

    const Comments = () => { const slider = new Glide('.glide', { type: 'carousel', perView: 2, draggable: true, arrows: { prev: '.glider-prev', next: '.glider-next' }, dots: '.dots', hoverpause: true, autoplay: 2000, breakpoints: { 800: { perView: 1 }, 1200: { perView: 2 } }

    })

    useEffect(() => {

    return () => slider.mount()
    

    }, [slider])

    return (

      <div className="glide">
        
        <div className="glide__track" data-glide-el="track">
          <ul className="glide__slides">
            <li className="glide__slide bg-white px-3 py-8 rounded-2xl">
              <div className=''>
                <h3 className='b text-2xl font-bold mb-6'>My Networth is already $34k</h3>
                <q className='calmer-white'>When I got frustrated with MINT, I found UNINE through some random blog post and I've never looked back</q>
              </div>
              <div className='flex items-center justify-between mt-6'>
                <div className='flex items-center'>
                  <div className='avatar mr-3'>
                    <img className='h-12 w-12 rounded-3xl' src='https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bWFufGVufDB8fDB8fA%3D%3D&w=1000&q=80' />
                  </div>
                  <div className='flex flex-col'>
                    <h4 className='b text-lg font-bold'>Wade Waren</h4>
                    <p className='calmer-white'>2 Years as a UNINE user</p>
                  </div>
                </div>
                <div className='flex items-center justify-center'>
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" className="bi bi-star-fill mr-2 text-[#FFD700]" viewBox="0 0 16 16"> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/> </svg>
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" className="bi bi-star-fill mr-2 text-[#FFD700]" viewBox="0 0 16 16"> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/> </svg>
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" className="bi bi-star-fill mr-2 text-[#FFD700]" viewBox="0 0 16 16"> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/> </svg>
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" className="bi bi-star-fill mr-2 text-[#FFD700]" viewBox="0 0 16 16"> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/> </svg>
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" className="bi bi-star-fill mr-2 text-[#FFD700]" viewBox="0 0 16 16"> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/> </svg>
                </div>
              </div>
            </li>
    
            <li className="glide__slide bg-white px-3 py-8 rounded-2xl">
              <div className=''>
                <h3 className='b text-2xl font-bold mb-6'>My Networth is already $44k</h3>
                <q className='calmer-white'>When I got frustrated with MINT, I found UNINE through some random blog post and I've never looked back</q>
              </div>
              <div className='flex items-center justify-between mt-6'>
                <div className='flex items-center'>
                  <div className='avatar mr-3'>
                    <img className='h-12 w-12 rounded-3xl' src='https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bWFufGVufDB8fDB8fA%3D%3D&w=1000&q=80' />
                  </div>
                  <div className='flex flex-col'>
                    <h4 className='b text-lg font-bold'>Wade Waren</h4>
                    <p className='calmer-white'>2 Years as a UNINE user</p>
                  </div>
                </div>
                <div className='flex items-center justify-center'>
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" className="bi bi-star-fill mr-2 text-[#FFD700]" viewBox="0 0 16 16"> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/> </svg>
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" className="bi bi-star-fill mr-2 text-[#FFD700]" viewBox="0 0 16 16"> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/> </svg>
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" className="bi bi-star-fill mr-2 text-[#FFD700]" viewBox="0 0 16 16"> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/> </svg>
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" className="bi bi-star-fill mr-2 text-[#FFD700]" viewBox="0 0 16 16"> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/> </svg>
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" className="bi bi-star-fill mr-2 text-[#FFD700]" viewBox="0 0 16 16"> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/> </svg>
                </div>
              </div>
            </li>
    
            <li className="glide__slide bg-white px-3 py-8 rounded-2xl">
              <div className=''>
                <h3 className='b text-2xl font-bold mb-6'>My Networth is already $60k</h3>
                <q className='calmer-white'>When I got frustrated with MINT, I found UNINE through some random blog post and I've never looked back</q>
              </div>
              <div className='flex items-center justify-between mt-6'>
                <div className='flex items-center'>
                  <div className='avatar mr-3'>
                    <img className='h-12 w-12 rounded-3xl' src='https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bWFufGVufDB8fDB8fA%3D%3D&w=1000&q=80' />
                  </div>
                  <div className='flex flex-col'>
                    <h4 className='b text-lg font-bold'>Wade Waren</h4>
                    <p className='calmer-white'>2 Years as a UNINE user</p>
                  </div>
                </div>
                <div className='flex items-center justify-center'>
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" className="bi bi-star-fill mr-2 text-[#FFD700]" viewBox="0 0 16 16"> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/> </svg>
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" className="bi bi-star-fill mr-2 text-[#FFD700]" viewBox="0 0 16 16"> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/> </svg>
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" className="bi bi-star-fill mr-2 text-[#FFD700]" viewBox="0 0 16 16"> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/> </svg>
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" className="bi bi-star-fill mr-2 text-[#FFD700]" viewBox="0 0 16 16"> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/> </svg>
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" className="bi bi-star-fill mr-2 text-[#FFD700]" viewBox="0 0 16 16"> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/> </svg>
                </div>
              </div>
            </li>
            
          </ul>
          <div role="tablist" class="dots"></div>
        </div>
        
      </div>
    

    ) }

    export default Comments `

    opened by Sijibomii 0
Releases(v3.6.0)
  • v3.6.0(Sep 27, 2022)

    What's Changed

    • feat: add toArray function to convert NodeList to Array by @samuelfullerthomas in https://github.com/glidejs/glide/pull/603
    • remove deprecated event.keyCode and replace with event.code by @rhysstubbs in https://github.com/glidejs/glide/pull/609
    • Add package.json "type" field by @julienchazal in https://github.com/glidejs/glide/pull/623

    New Contributors

    • @samuelfullerthomas made their first contribution in https://github.com/glidejs/glide/pull/603
    • @rhysstubbs made their first contribution in https://github.com/glidejs/glide/pull/609
    • @julienchazal made their first contribution in https://github.com/glidejs/glide/pull/623

    Full Changelog: https://github.com/glidejs/glide/compare/v3.5.2...v3.6.0

    Source code(tar.gz)
    Source code(zip)
  • v3.5.2(Nov 28, 2021)

  • v3.4.1(Sep 23, 2019)

  • v3.3.0(Apr 20, 2019)

    Bug Fixes

    • fix(run): run.start and run.end events should be called when moving to first/last silde (#344)

    Internals

    • feat(run): Warn about invalid direction pattern (#343)
    • test(): Introduce test suite for events (#344)
    Source code(tar.gz)
    Source code(zip)
  • v3.2.7(Mar 22, 2019)

    Bug Fixes

    • fix(controls): Check if control element exists before removing active class (#320)
    • fix(swipe): Remove movable flag that caused blocking of swiping (#330)

    Internals

    • fix(controls): Touchstart event should be passive (#322)
    Source code(tar.gz)
    Source code(zip)
  • v3.2.6(Feb 10, 2019)

  • v3.2.5(Feb 6, 2019)

  • v3.2.4(Nov 24, 2018)

    Features

    • feat(swipe): Use passive events (#264)

    Bug Fixes

    • fix(run): Do not disable slides changing when there are fewer items than a number in perView option (#292)
    • fix(clones): Add extra clones in peek mode (#278)
    • fix(swipe): Stop scrolling page while swiping (#258)

    Internals

    • fix(defaults): Use shorten format for animationTimingFunc
    Source code(tar.gz)
    Source code(zip)
  • v3.2.3(Aug 8, 2018)

    Bug Fixes

    • fix(styles): Don't use initial for white-space declaration (#249)
    • fix(gaps): Gaps have to property recalculate on resize
    • fix(swipe): Remove the passive attribute from swiping events (#248, #245)

    Internals

    • fix(tests): Update jest package and resolve local storage error of jsdom by using older version
    Source code(tar.gz)
    Source code(zip)
  • v3.2.2(Jul 23, 2018)

    Bug Fixes

    • fix(swipe): Don't return events handler methods from bonded closures
    • fix(utils): Protect from missing DOM firstChild if parentNode do not exist (#247)
    Source code(tar.gz)
    Source code(zip)
  • v3.2.1(Jul 22, 2018)

    Bug Fixes

    • fix(breakpoints): Using .update() breaks breakpoints functionality (#244)

    Internals

    • mergeOptions function now extends breakpoints propertly
    • Use mergeOptions instead of directly Object.assign in update() API method
    Source code(tar.gz)
    Source code(zip)
  • v3.2.0(Jul 16, 2018)

    Features

    • feat(run): Introduce bound option for aligning slides to the end edge
    • feat(transformer): Allow for extending collection of translate mutators
    • refactor(clones): Optimize and enhance clones generation
    • refactor(swipe): Optimize swiping

    Bug Fixes

    • fix(run): Running distance should be 0 if a number of sliders is smaller than perView settings

    Internals

    • chore(): Update rollup/rollup package and building script
    • chore(config): Fix links to the repository in package.json
    Source code(tar.gz)
    Source code(zip)
  • v3.1.0(Jun 20, 2018)

    Features

    • feat(run): Add additional rewind flag to the defaults that allow to disable the loop effect

    Bug Fixes

    • fix(clones): Use parent.removeChild() method to remove cloned DOM nodes instead of el.remove() for compatibility with IE11 (#228)
    • fix(clones): Fix infinite loop if there were no slides (#231)

    Internals

    • feat(anchors): It's unnecessary to clear data-href attribute on anchor each time
    Source code(tar.gz)
    Source code(zip)
  • v3.0.4(May 20, 2018)

    Features

    • Support Internet Explorer 11+ (#214)

    Internals

    • Swap Array.includes to Array.indexOf for better compatibility
    • Swap el.dataset to el.getAttribute/setAttribute for better compatibility
    Source code(tar.gz)
    Source code(zip)
  • v3.0.3(Apr 30, 2018)

    Bug Fixes

    • Fix minify build so it won't break min script. Uglify was broking script after purring warn() function

    Internals

    • Use Array.prototype.slice instead of Array.from for a better compatibility
    • Rename scoped variables in Html component getters and setters so they won't be a reserved words
    Source code(tar.gz)
    Source code(zip)
  • v3.0.2(Apr 24, 2018)

  • v3.0.1(Apr 16, 2018)

  • v3.0.0(Apr 3, 2018)

    What's new in 3.0?

    Dependency-free

    Everything on board, ready for action. Written in vanilla JavaScript without hidden dependencies.

    Lightweight

    It weighs only ~22kb (~7kb gzipped) with every functionality on board.

    Modular

    Need a few selected modules? Remove unused modules and drop overall script weight even more.

    Extendable

    Need something more custom-made? Plug-in your own modules with additional functionalities.

    Bundlers ready

    Modern setup? Using Rollup or Webpack? We have your back.

    Performance

    Dropping jQuery and moving to vanilla JavaScript greatly improved overall performance.

    Source code(tar.gz)
    Source code(zip)
  • v2.1.0(Jan 21, 2017)

    • Fixes problems with default events from anchors and images
    • Sets padding to 0 on .glide__track to prevent a position issue when using <ul>
    Source code(tar.gz)
    Source code(zip)
  • v2.0.9(Aug 6, 2016)

    • Stop sliding when only having 1 image? #158
    • Prevent call 'setup' in resize after glide has been destroyed #160
    • Update main section in bower.json #157
    • Resize still fires after calling destroy #156
    Source code(tar.gz)
    Source code(zip)
  • v2.0.8(May 18, 2016)

    • #148 Fix compatibility issue with use strict
    • #152 hoverpause doesn't work when hovering of prev/next buttons
    • #143 Register as npm package
    Source code(tar.gz)
    Source code(zip)
  • v2.0.7(Mar 17, 2016)

    • #146 fixed resize event being global: use unique id for each instance of Glide
    • #145 interval reset with autoplay
    • #141 dragDistance doesn't seem to change anything?
    • #138 Block multiple scrolling direction on mobile
    Source code(tar.gz)
    Source code(zip)
  • v2.0.6(Dec 21, 2015)

  • v2.0.5(Nov 5, 2015)

    • Pass richer parameters to the callbacks #96
    • Separate callbacks and custom events
    • New Api method - animate()
    • different time for sliders #106
    • Slides not swiping on mobiles #127
    Source code(tar.gz)
    Source code(zip)
  • v2.0.4(Sep 21, 2015)

  • v2.0.3(Jul 21, 2015)

    • Added padding mode
    • Added centered mode
    • data-glide-trigger can have multiple targets
    • Fixes callbacks run on browser resize
    • Fixes events unbind with destroy method
    • Splited stylesheet into two files
    • Added default styling
    • Fixed css minify option in less task
    • Removed dot added to clones class
    • Fixes wrong startup position in slider type with paddings and startAt options
    • DRYing Build and Animation modules
    • afterInit current slide number and current slide element as params
    • Fixing touch freezing
    Source code(tar.gz)
    Source code(zip)
Owner
A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more
null
Slide everything into this vanilla javascript slider: just 20kb all-inclusive, no dependencies!

Lightweight vanilla javascript media and contents slider, by LCweb Just 20KB to have: Top features list: single file, no dependencies, 100% pure javas

Luca 4 May 12, 2021
Fast and lightweight dependency-free vanilla JavaScript polyfill for native lazy loading / the awesome loading='lazy'-attribute.

loading="lazy" attribute polyfill Fast and lightweight vanilla JavaScript polyfill for native lazy loading, meaning the behaviour to load elements rig

Maximilian Franzke 571 Dec 30, 2022
Accordion Slider is a jQuery plugin that combines the functionality of a slider with that of an accordion.

Accordion Slider - jQuery slider plugin A responsive and touch-enabled jQuery accordion slider plugin that combines the functionality of a slider with

null 0 Dec 29, 2022
DateTimePickerComponent is a very lightweight and dependency-free web component written in pure JavaScript

DateTimePickerComponent Description DateTimePickerComponent is a very lightweight (just over 20KB) and dependency-free web component written in pure J

null 14 Dec 24, 2022
a lightweight, dependency-free JavaScript plugin which makes a HTML table interactive

JSTable The JSTable is a lightweight, dependency-free JavaScript plugin which makes a HTML table interactive. The plugin is similar to the jQuery data

null 63 Oct 20, 2022
The JSTable is a lightweight, dependency-free JavaScript plugin which makes a HTML table interactive

The JSTable is a lightweight, dependency-free JavaScript plugin which makes a HTML table interactive. The plugin is similar to the jQuery data

null 63 Oct 20, 2022
Lightweight, Portable, Flexible Distributed/Mobile Deep Learning with Dynamic, Mutation-aware Dataflow Dep Scheduler; for Python, R, Julia, Scala, Go, Javascript and more

Apache MXNet (incubating) for Deep Learning Apache MXNet is a deep learning framework designed for both efficiency and flexibility. It allows you to m

The Apache Software Foundation 20.2k Jan 5, 2023
A simple, lightweight Flexbox carousel JavaScript plugin.

FlexCarousel.js A simple, lightweight Flexbox carousel ES6 JavaScript plugin. An unofficial fork of Slick Carousel. Status Getting Started Download th

Tom Hartley 13 Jun 11, 2021
DOM ViewModel - A thin, fast, dependency-free vdom view layer

domvm (DOM ViewModel) A thin, fast, dependency-free vdom view layer (MIT Licensed) Introduction domvm is a flexible, pure-js view layer for building h

null 604 Dec 8, 2022
In this project, I restructure my previous Awesome books app code. The goal is to practice ES6 syntax and also make the code more organized by using ES6 modules.

Awesome Books In this project, I will restructure my previous Awesome books app code. The goal is to make it more organized by using modules. I will a

Sidney Kaguli 9 Aug 23, 2022
A lightweight, modern and customizable JavaScript slider library.

NSlider NSlider is a lightweight (< 10 KB), modern and customizable JavaScript slider library. CDN Development https://cdn.jsdelivr.net/gh/fatihege/ns

Fatih 6 Jan 20, 2022
Make the content slide prettily across the screen with variable sizes of scrolling items, in any of four directions, pausing while the mouse is over the marquee, and all with vanilla JavaScript.

TEG Marquee Make the content slide prettily across the screen with variable sizes of scrolling items, in any of four directions, pausing while the mou

Paul B. Joiner 0 Dec 30, 2021
🍉 Water is a micro-ORM + QueryBuilder designed to facilitate queries and operations on PostgreSQL databases designed to work in Melon

?? Water Water is a micro-ORM + QueryBuilder designed to facilitate queries and operations on PostgreSQL databases designed to work in MelonRuntime In

Melon Runtime 22 Aug 6, 2022
Speed up the your micro-frontend development. Configure less and delivery more.

React Micro Speed up the your micro-frontend development. Configure less and delivery more. You don't need to waste more time trying to change your ap

Nevinha 7 Nov 7, 2022
Less clicking, more creating. Navigate to your favorite actions on the websites you love with just one click.

Navigate to your favorite actions on the websites you love with just one click Web https://irtaza9.github.io/awesome-shortcuts/ Available Shortcuts Go

Irtaza Hussain 9 Aug 25, 2022
Show More Less - jQuery - Very useful tiny tool

myOwnLineShowMoreLess Show More Less - jQuery - Very useful tiny tool. Demo Getting Started This is simple plugin developed using jQuery. Prerequisite

Siva 1 Dec 29, 2020
This is a dependency-free easy-to-use vanilla JavaScript addon allowing you to create HTML currency inputs with various different currencies and formattings.

intl-currency-input This is a dependency-free easy-to-use vanilla JavaScript addon allowing you to create HTML currency inputs with various different

null 6 Jan 4, 2023