# glidejs/glide

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/glidejs-glide).**

7,668 stars · 760 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/glidejs/glide
- Homepage: https://glidejs.com
- awesome-repositories: https://awesome-repositories.com/repository/glidejs-glide.md

## Topics

`carousel` `dependency-free` `es6` `javascript` `lightweight` `slider`

## Description

Glide is a dependency-free ES6 JavaScript library used to create responsive content sliders and carousels. It functions as a modular framework for implementing sliding content areas that adapt their layout and settings based on browser window breakpoints.

The library is distinguished by a modular architecture that allows the inclusion of only necessary logic to reduce final bundle size. It separates core structural styles from thematic visual styles and utilizes a plugin system to extend the base slider functionality and lifecycle hooks.

The component covers a range of interaction and navigation capabilities, including touch swipe gestures, keyboard arrow mapping, and autoplay sequence management. It supports infinite loop scrolling, multi-slide viewports, and bullet pagination.

Configuration can be managed through programmatic settings or declarative HTML data attributes.

## Tags

### User Interface & Experience

- [Content Carousels](https://awesome-repositories.com/f/user-interface-experience/content-display-components/content-carousels.md) — Renders a responsive content carousel using a track and sliding elements defined via markup attributes. ([source](https://glidejs.com/docs/options/))
- [Carousel Components](https://awesome-repositories.com/f/user-interface-experience/carousel-components.md) — A lightweight interface for cycling through content sequences that adapts based on browser breakpoints.
- [Carousel Transition Effects](https://awesome-repositories.com/f/user-interface-experience/carousel-transition-effects.md) — Implements smooth visual transitions between slides using coordinate transform animations. ([source](https://glidejs.com/docs/components/translate/))
- [Content Sliders](https://awesome-repositories.com/f/user-interface-experience/content-sliders.md) — Provides a programmatic tool for implementing sliding content areas with support for custom themes and event hooks.
- [CSS Transform Translations](https://awesome-repositories.com/f/user-interface-experience/css-transform-translations.md) — Uses CSS transforms to create smooth visual transitions when shifting elements across the viewport.
- [Infinite Looping Carousels](https://awesome-repositories.com/f/user-interface-experience/infinite-looping-carousels.md) — Provides an infinite looping mechanism that wraps content back to the start after the last item is reached.
- [Touch Navigation Interfaces](https://awesome-repositories.com/f/user-interface-experience/navigation-components/touch-navigation-interfaces.md) — Implements swipe and drag interactions to allow users to navigate through content on touch-enabled screens.
- [Slide Navigation Controls](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/navigation-flow-controllers/slide-navigation-links/slide-navigation-controls.md) — Provides keyboard arrow controls and programmatic navigation to ensure the sliding content is accessible.
- [Carousel Navigation APIs](https://awesome-repositories.com/f/user-interface-experience/programmatic-triggers/carousel-navigation-apis.md) — Provides programmatic APIs to move the slider to a specific position or calculated index. ([source](https://glidejs.com/docs/components/run/))
- [Responsive Breakpoints](https://awesome-repositories.com/f/user-interface-experience/responsive-breakpoints.md) — Maps specific configuration settings to media breakpoints for fluid layout adaptation. ([source](https://glidejs.com/docs/options/))
- [Input-Driven Navigation](https://awesome-repositories.com/f/user-interface-experience/slide-navigation-logic/input-driven-navigation.md) — Integrates keyboard arrows, mouse dragging, and touch swiping into a unified system for navigating slides. ([source](https://glidejs.com/docs/options/))
- [Input-to-Action Mappings](https://awesome-repositories.com/f/user-interface-experience/touch-gesture-handlers/touch-event-processors/coordinate-to-translation-mapping/input-to-action-mappings.md) — Translates touch swipes, mouse drags, and keyboard events into specific slide index movements.
- [Carousel Autoplay Controls](https://awesome-repositories.com/f/user-interface-experience/carousel-autoplay-controls.md) — Provides automatic slide cycling on a timer with programmatic controls to start or stop the sequence. ([source](https://glidejs.com/docs/components/autoplay/))
- [Carousel Navigation Elements](https://awesome-repositories.com/f/user-interface-experience/carousel-navigation-elements.md) — Includes interactive buttons and data attributes to move the slider forward, backward, or to a specific index. ([source](https://glidejs.com/docs/setup))
- [Event-Driven State Managers](https://awesome-repositories.com/f/user-interface-experience/event-driven-state-managers.md) — Triggers custom callback functions in response to internal state changes and user interactions.
- [Keyboard Navigation](https://awesome-repositories.com/f/user-interface-experience/keyboard-navigation.md) — Maps arrow keys to slide movement to improve accessibility and navigation speed. ([source](https://glidejs.com/docs/components/keyboard/))
- [Pagination Navigation](https://awesome-repositories.com/f/user-interface-experience/pagination-navigation.md) — Implements pagination dots that track the current slide index and allow users to jump to specific slides. ([source](https://glidejs.com/docs/setup/))
- [Partial Slide Viewports](https://awesome-repositories.com/f/user-interface-experience/partial-slide-viewports.md) — Displays a partial view of the next and previous slides to visually signal additional available content. ([source](https://glidejs.com/docs/components/peek/))
- [Modular Slider Frameworks](https://awesome-repositories.com/f/user-interface-experience/slider-components/slider-orchestration/modular-slider-frameworks.md) — Utilizes a modular architecture allowing inclusion of only necessary logic to reduce final bundle size.
- [Behavior-Style Decoupling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-class-based-styling/behavior-style-decoupling.md) — Decouples structural CSS classes used for logic from thematic classes used for visual customization.
- [Visual Styling Frameworks](https://awesome-repositories.com/f/user-interface-experience/visual-styling-frameworks.md) — Separates core functional styles from optional thematic styles to implement custom visual appearances. ([source](https://glidejs.com/docs/setup/))

### Part of an Awesome List

- [Carousels and Sliders](https://awesome-repositories.com/f/awesome-lists/devtools/carousels-and-sliders.md) — A dependency-free ES6 library for creating responsive sliders and content carousels.
- [Responsive Layout Breakpoints](https://awesome-repositories.com/f/awesome-lists/devtools/carousels-and-sliders/custom-carousel-rendering/responsive-layout-breakpoints.md) — Adapts the slider layout and configuration automatically based on defined browser window breakpoints.
- [Custom Logic Extensions](https://awesome-repositories.com/f/awesome-lists/devtools/carousels-and-sliders/custom-logic-extensions.md) — Allows the registration of custom classes to implement bespoke behavioral logic within the slider lifecycle. ([source](https://glidejs.com/docs/extending-components/))
- [Slider Capability Extensions](https://awesome-repositories.com/f/awesome-lists/devtools/core-extensions/slider-capability-extensions.md) — Provides a plugin system to add specialized behaviors and additional features to the base slider implementation. ([source](https://glidejs.com/docs/))

### Software Engineering & Architecture

- [Modular Plugin Architectures](https://awesome-repositories.com/f/software-engineering-architecture/modular-plugin-architectures.md) — Features a modular architecture allowing the addition of custom plugins to extend core functionality and lifecycle hooks.
- [Lifecycle](https://awesome-repositories.com/f/software-engineering-architecture/event-logging/event-callbacks/lifecycle.md) — Executes custom callback functions whenever internal state changes or user interactions occur. ([source](https://glidejs.com/docs/api/))
- [Tree-Shakable Feature Imports](https://awesome-repositories.com/f/software-engineering-architecture/modular-feature-architectures/tree-shakable-feature-imports.md) — Supports importing only required modules to minimize the final JavaScript bundle size. ([source](https://glidejs.com/docs/setup))

### Development Tools & Productivity

- [Declarative Configuration](https://awesome-repositories.com/f/development-tools-productivity/declarative-configuration.md) — Supports controlling slider movement and autoplay timing via declarative HTML data attributes. ([source](https://glidejs.com/docs/data-attributes/))

### Web Development

- [Lightweight JS Widgets](https://awesome-repositories.com/f/web-development/lightweight-js-widgets.md) — Implements lightweight, dependency-free interface elements with custom hooks for specific behaviors and visual styling.
- [Tree-Shaking Support](https://awesome-repositories.com/f/web-development/tree-shaking-support.md) — Implements a modular architecture that allows developers to include only necessary logic to reduce the final bundle size. ([source](https://glidejs.com/docs/))