### Glide.js Core Documentation Sections Overview

Source: https://glidejs.com/docs/setup

This section outlines the main documentation categories available for Glide.js. It provides a structured list of topics, including setup instructions, configuration options, API references, event handling, data attributes, and guides for extending transformers and components.

```APIDOC
Docs:
- Introduction
- Contributing
- Setup
- Options
- API
- Events
- Data Attributes
- Extending Transformers
- Extending Components
```

--------------------------------

### Install Glide.js via NPM

Source: https://glidejs.com/docs/setup

Instructions to install the Glide.js library using npm, the Node.js package manager. This method is recommended for projects using bundlers like Webpack or Rollup, ensuring trouble-free use.

```shell
npm install @glidejs/glide
```

--------------------------------

### Initialize Glide.js with Selected Components (ES Modules)

Source: https://glidejs.com/docs/setup

This example illustrates how to import and mount only specific Glide.js components, such as 'Controls' and 'Breakpoints', when using ES Modules. This approach is beneficial for reducing the overall bundle size by leveraging bundler features like tree-shaking, ensuring only necessary code is included.

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

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

--------------------------------

### Define Basic Glide.js Controls Structure

Source: https://glidejs.com/docs/setup

Illustrates the basic HTML structure for Glide.js controls. It uses data-glide-el="controls" for the wrapper and data-glide-dir="{pattern}" on individual control buttons to define their movement behavior, such as moving to the start or end.

```HTML
<div data-glide-el="controls">
  <button data-glide-dir="<<">Start</button>
  <button data-glide-dir=">>">End</button>
</div>
```

--------------------------------

### Initialize Glide.js with Basic Options

Source: https://glidejs.com/docs/options

Demonstrates how to create a new Glide.js instance by passing a CSS selector for the container and an options object to configure its fundamental behavior, such as the movement type, starting slide, and the number of visible slides.

```JavaScript
new Glide('.glide', {
  type: 'carousel',
  startAt: 0,
  perView: 3
})
```

--------------------------------

### Initialize Glide.js with Responsive Breakpoints

Source: https://glidejs.com/docs/options

Example of initializing a Glide.js slider, demonstrating how to set a default `perView` and dynamically adjust it for different screen sizes using the `breakpoints` option. The `glide.mount()` method activates the slider, applying the configured options.

```javascript
var glide = new Glide('#options-breakpoints', {
  perView: 3,
  breakpoints: {
    1024: {
      perView: 2
    },
    600: {
      perView: 1
    }
  }
})

glide.mount()
```

--------------------------------

### Glide.js: Interactive play(interval) Method Example

Source: https://glidejs.com/docs/api

Shows how to start autoplay with a specific interval when a button is clicked, even if autoplay was initially disabled for the Glide.js instance.

```javascript
var button = document.querySelector('#api-play-button')

var glide = new Glide('#api-play', {
  startAt: 0,
  perView: 3,
  autoplay: false
})

button.addEventListener('click', function () {
  glide.play(1500)
})

glide.mount()
```

--------------------------------

### Dynamically Update Glide.js StartAt Option

Source: https://glidejs.com/docs/options

Shows how to set the initial starting slide index for a Glide.js instance and subsequently update it dynamically based on user input. The example uses `glide.update()` to change the `startAt` property, allowing the carousel to jump to a new slide.

```JavaScript
var input = document.querySelector('#options-start-at-input')

var glide = new Glide('#options-start-at', {
  startAt: input.value,
  perView: 3
})

input.addEventListener('input', function (event) {
  glide.update({
    startAt: event.target.value
  })
})

glide.mount()
```

--------------------------------

### Initialize and Mount Glide.js Slider

Source: https://glidejs.com/docs/setup

Provides the JavaScript code to initialize and mount a Glide.js slider instance. It includes referencing the minified script in an HTML document and then creating a new Glide instance, followed by calling the mount() method to activate the slider.

```HTML
<script src="node_modules/@glidejs/glide/dist/glide.min.js"></script>

<script>
  new Glide('.glide').mount()
</script>
```

--------------------------------

### Glide.js: Interactive go() Method Example

Source: https://glidejs.com/docs/api

Demonstrates various `go()` patterns triggered by button clicks, including forward, backward, jump to a specific slide, rewind to beginning, and rewind to end.

```javascript
var end = document.querySelector('#api-go-end')
var jump = document.querySelector('#api-go-jump')
var forward = document.querySelector('#api-go-forward')
var backward = document.querySelector('#api-go-backward')
var beginning = document.querySelector('#api-go-beginning')

var glide = new Glide('#api-go', {
  startAt: 0,
  perView: 3
})

forward.addEventListener('click', function () {
  glide.go('>')
})

both.addEventListener('click', function () {
  glide.go('<')
})

jump.addEventListener('click', function () {
  glide.go('=2')
})

beginning.addEventListener('click', function () {
  glide.go('<<')
})

end.addEventListener('click', function () {
  glide.go('>>')
})

glide.mount()
```

--------------------------------

### Initialize Glide.js with Default ES Modules

Source: https://glidejs.com/docs/setup

This snippet demonstrates the most basic way to import and initialize Glide.js using ES Modules. It imports the main Glide class and mounts the slider with its default configuration, making it ready for use on an element with the class '.glide'.

```javascript
import Glide from '@glidejs/glide'

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

--------------------------------

### Glide.js Built-in Components List

Source: https://glidejs.com/docs/setup

This entry enumerates the various pre-built components that come with Glide.js. These components can be selectively imported and mounted to add specific functionalities to the slider, such as navigation controls, autoplay behavior, or handling keyboard interactions.

```APIDOC
Components:
- Anchors
- Autoplay
- Breakpoints
- Build
- Clones
- Controls
- Gaps
- Html
- Images
- Keyboard
- Move
- Peek
- Resize
- Run
- Sizes
- Swipe
- Transition
- Translate
```

--------------------------------

### Importing and Mounting Glide.js Autoplay Module

Source: https://glidejs.com/docs/components/autoplay

Demonstrates how to import the Autoplay module from `@glidejs/glide/dist/glide.modular.esm` and mount it with a new Glide instance. This setup is essential for enabling the auto-changing slide functionality.

```JavaScript
import Glide, { Autoplay } from '@glidejs/glide/dist/glide.modular.esm'

new Glide('.glide').mount({ Autoplay })
```

--------------------------------

### Glide.js: Interactive enable() Method Example

Source: https://glidejs.com/docs/api

Shows how to re-enable a previously disabled Glide.js instance's interaction when a button is clicked, restoring user control.

```javascript
var button = document.querySelector('#api-enable-button')

var glide = new Glide('#api-enable', {
  startAt: 0,
  perView: 3
})

glide.disable()

button.addEventListener('click', function () {
  glide.enable()
})

glide.mount()
```

--------------------------------

### Define Basic Glide.js HTML Structure

Source: https://glidejs.com/docs/setup

Provides the essential HTML markup required for a Glide.js slider. It includes the main container with class 'glide', the track element with data-glide-el="track", and the unordered list of slides.

```HTML
<div class="glide">
  <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>
```

--------------------------------

### Example Schema for 'move' Property

Source: https://glidejs.com/docs/components/run

Illustrates the structure of the `move` object, showing its direction and steps as used within the Glide.js 'Run' module. This object defines how a movement is represented internally.

```JSON
{
  "direction": "=",
  "steps": "1"
}
```

--------------------------------

### Include Glide.js Core and Theme Stylesheets via HTML Link

Source: https://glidejs.com/docs/setup

Demonstrates how to link the required core and optional theme CSS files for Glide.js directly in an HTML document using <link> tags. The core stylesheet is essential for functionality, while the theme stylesheet provides visual styling and can be customized or omitted.

```HTML
<!-- 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">
```

--------------------------------

### Glide.js: Force Autoplay with play(interval) Method

Source: https://glidejs.com/docs/api

Demonstrates how to forcefully start autoplay on an instance that was initialized with autoplay disabled, by passing an interval to the `play()` method.

```javascript
var glide = new Glide('.glide', { autoplay: false }).mount()

glide.play(4000)

```

--------------------------------

### Initialize Glide.js with Keyboard Module

Source: https://glidejs.com/docs/components/keyboard

This code snippet demonstrates how to import the Keyboard module from Glide.js and mount it to a new Glide instance. This setup enables keyboard navigation for the slider, allowing users to control movement with arrow keys.

```JavaScript
import Glide, { Keyboard } from '@glidejs/glide/dist/glide.modular.esm'

new Glide('.glide').mount({ Keyboard })
```

--------------------------------

### Glide.js: Interactive pause() Method Example

Source: https://glidejs.com/docs/api

Demonstrates pausing the autoplay of a Glide.js instance when a button is clicked.

```javascript
var button = document.querySelector('#api-pause-button')

var glide = new Glide('#api-pause', {
  startAt: 0,
  perView: 3,
  autoplay: 1500
})

button.addEventListener('click', function () {
  glide.pause()
})

glide.mount()
```

--------------------------------

### Glide.js API: play(force) Method

Source: https://glidejs.com/docs/api

Documents the `play()` method, which starts or resumes the auto-playing functionality of the Glide.js instance. It can optionally force autoplay with a specific interval.

```APIDOC
play(force?: number)
  force: number (optional) - If provided, forces autoplay with this interval, overriding instance settings.
```

--------------------------------

### Glide.js Swipe Module API Reference

Source: https://glidejs.com/docs/components/swipe

Detailed API documentation for the Glide.js Swipe module, including methods for mounting, handling various swipe events (start, move, end), normalizing touch points, calculating thresholds, and managing event listeners.

```APIDOC
Swipe Module Methods:
  mount():
    Usage: Mounts and initializes a component. Binds mouse and touch events
  start(event: Object):
    Usage: Handler of `swipestart` event. Calculates entry points of the user's tap
  move(event: Object):
    Usage: Handler of `swipemove` event. Calculates user's tap angle and distance
  end(event: Object):
    Usage: Handler of `swipeend` event. Finishes user's tap and decides about instance movement
  touches(event: Object):
    Usage: Normalizes event's touches points according to different types
  threshold(event: Object):
    Usage: Gets value of minimum swipe distance setting based on event type
  bindSwipeStart():
    Usage: Adds listener for swipe starting event
  unbindSwipeStart():
    Usage: Removes previously added listener for swipe starting event
  bindSwipeMove():
    Usage: Adds a listener for swipe moving event
  unbindSwipeMove():
    Usage: Removes previously added listener for swipe moving event
  bindSwipeEnd():
    Usage: Adds listener for swipe end event
  unbindSwipeEnd():
    Usage: Removes previously added listener for swipe end event
  enable():
    Usage: Enables instance swiping events
  disable():
    Usage: Disables instance swiping events
```

--------------------------------

### Import Glide.js Core and Theme Stylesheets via SASS

Source: https://glidejs.com/docs/setup

Shows how to import the core and theme SASS files for Glide.js directly into a SASS project using @import statements. This method allows for easier customization and integration into a SASS workflow, leveraging SASS features for styling.

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

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

--------------------------------

### Glide.js: Interactive disable() Method Example

Source: https://glidejs.com/docs/api

Demonstrates disabling a Glide.js instance's interaction when a button is clicked, suspending user control.

```javascript
var button = document.querySelector('#api-disable-button')

var glide = new Glide('#api-disable', {
  startAt: 0,
  perView: 3
})

button.addEventListener('click', function () {
  glide.disable()
})

glide.mount()
```

--------------------------------

### Initialize Glide.js with Images Module

Source: https://glidejs.com/docs/components/images

Demonstrates how to import the `Images` module from `@glidejs/glide/dist/glide.modular.esm` and mount it into a new Glide.js instance. This setup enables the module's functionality to prevent unwanted dragging of images within the slider.

```javascript
import Glide, { Images } from '@glidejs/glide/dist/glide.modular.esm'

new Glide('.glide').mount({ Images })
```

--------------------------------

### Implement Glide.js Bullets Navigation

Source: https://glidejs.com/docs/setup

Demonstrates how to create bullet navigation for a Glide.js slider. It uses data-glide-el="controls[nav]" for the bullet wrapper to activate toggling an activity class, and data-glide-dir="={i}" on individual buttons to navigate to specific slides.

```HTML
<div class="glide">
  <div class="glide__track" data-glide-el="track">...</div>

  <div class="glide__bullets" data-glide-el="controls[nav]">
    <button class="glide__bullet" data-glide-dir="=0"></button>
    <button class="glide__bullet" data-glide-dir="=1"></button>
    <button class="glide__bullet" data-glide-dir="=2"></button>
  </div>
</div>
```

--------------------------------

### Initialize Glide.js with Controls Component

Source: https://glidejs.com/docs/components/controls

This snippet demonstrates how to import and mount the 'Controls' component with a Glide.js slider instance. It shows the basic setup required to enable navigation buttons for the slider.

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

new Glide('.glide').mount({ Controls })
```

--------------------------------

### Using Breakpoints.match() Method for Responsive Configuration

Source: https://glidejs.com/docs/components/breakpoints

This example illustrates how to use the `Breakpoints.match()` method. It takes an object of breakpoint configurations (e.g., screen width to settings) and returns the settings object that corresponds to the currently active media breakpoint. This is useful for applying specific slider options at different screen sizes.

```JavaScript
// Return `{ perView: 1 }` with assumptions
// that width of the window is <=600px.
Breakpoints.match({
  600: { perView: 1 },
  1200: { perView: 3 }
})
```

--------------------------------

### Dynamically Update Glide.js FocusAt Option

Source: https://glidejs.com/docs/options

Illustrates how to configure and dynamically change the `focusAt` option in Glide.js, which determines the position of the active slide within the track. This example shows how to switch between focusing at the 'center' or a specific zero-based index.

```JavaScript
var input = document.querySelector('#options-focus-at-input')
var checkbox = document.querySelector('#options-focus-at-checkbox')

var glide = new Glide('#options-focus-at', {
  focusAt: input.value,
  perView: 4
})

function focus () {
  glide.update({
    focusAt: (checkbox.checked) ? checkbox.value : input.value
  })
}

input.addEventListener('input', focus)
checkbox.addEventListener('change', function () {
  input.disabled = checkbox.checked

  focus()
})

glide.mount()
```

--------------------------------

### Implement Glide.js Arrows Navigation

Source: https://glidejs.com/docs/setup

Shows how to add left and right arrow navigation to a Glide.js slider. It combines the basic slider structure with control buttons using data-glide-dir="<" and data-glide-dir=">" for previous and next slide actions, wrapped in a data-glide-el="controls" container.

```HTML
<div class="glide">
  <div class="glide__track" data-glide-el="track">...</div>

  <div class="glide__arrows" data-glide-el="controls">
    <button class="glide__arrow glide__arrow--left" data-glide-dir="<">prev</button>
    <button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
  </div>
</div>
```

--------------------------------

### Dynamically Update Glide.js PerView Option

Source: https://glidejs.com/docs/options

Demonstrates how to control the number of slides visible in the Glide.js viewport and dynamically adjust this setting. The example uses an input field to allow users to change the `perView` option, updating the carousel's display in real-time.

```JavaScript
var input = document.querySelector('#options-per-view-input')

var glide = new Glide('#options-per-view', {
  perView: input.value
})

input.addEventListener('input', function (event) {
  glide.update({
    perView: event.target.value
  })
})

glide.mount()
```

--------------------------------

### Configure Glide.js animationTimingFunc

Source: https://glidejs.com/docs/options

Defines the easing function for the slide animation. The default value is `'cubic-bezier(0.165, 0.840, 0.440, 1.000)'`, and it accepts a String type. This example shows how to dynamically change the `animationTimingFunc` option of a Glide.js instance using a select dropdown.

```javascript
var select = document.querySelector('#options-animation-timing-func-select')

var glide = new Glide('#options-animation-timing-func', {
  animationTimingFunc: select.value,
  animationDuration: 800,
  perView: 3
})

select.addEventListener('change', function (event) {
  glide.update({
    animationTimingFunc: event.target.value
  })
})

glide.mount()
```

--------------------------------

### Configure Glide.js touchRatio

Source: https://glidejs.com/docs/options

Sets the alternate moving distance ratio of the slides during swiping and dragging. The default value is 0.5, and it accepts a Number type. This example demonstrates how to dynamically update the `touchRatio` option of a Glide.js instance based on user input from an HTML input element.

```javascript
var input = document.querySelector('#options-touch-ratio-input')

var glide = new Glide('#options-touch-ratio', {
  touchRatio: input.value,
  perTouch: false,
  perView: 3
})

input.addEventListener('input', function (event) {
  glide.update({
    touchRatio: event.target.value
  })
})

glide.mount()
```

--------------------------------

### Enable Glide.js Keyboard Navigation

Source: https://glidejs.com/docs/options

This snippet shows how to enable or disable keyboard navigation for a Glide.js slider using the `keyboard` option. It allows users to change slides with left and right arrow keys, and the example demonstrates dynamically toggling this feature with a checkbox for flexible control.

```JavaScript
var checkbox = document.querySelector('#options-keyboard-checkbox')

var glide = new Glide('#options-keyboard', {
  keyboard: checkbox.checked,
  perView: 3
})

checkbox.addEventListener('change', function () {
  glide.update({
    keyboard: checkbox.checked
  })
})

glide.mount()
```

--------------------------------

### Implement Glide.js Bound Slider Behavior

Source: https://glidejs.com/docs/options

This snippet demonstrates the `bound` option in Glide.js, which prevents empty space after the last slide by stopping the slider at the end. This option is particularly useful with `slider` type and a non-centered `focusAt` setting, and the example shows how to dynamically enable/disable it via a checkbox.

```JavaScript
var checkbox = document.querySelector('#options-bound-checkbox')

var glide = new Glide('#options-bound', {
  bound: checkbox.checked,
  startAt: 7,
  perView: 3
})

checkbox.addEventListener('change', function () {
  glide.update({
    bound: checkbox.checked
  })
})

glide.mount()
```

--------------------------------

### Define Glide.js Control Movement Pattern with data-glide-dir

Source: https://glidejs.com/docs/data-attributes

This attribute specifies the movement action to be performed when a control element is clicked. It accepts various patterns such as moving one step forward or backward, jumping to a specific zero-based slide index, or rewinding to the start or end of the slider.

```HTML
<div class="glide">
  <div data-glide-el="controls">
    <button data-glide-dir="<">prev</button>
    <button data-glide-dir=">">next</button>
  </div>
</div>
```

--------------------------------

### Register a Custom Glide.js Transformer

Source: https://glidejs.com/docs/extending-transformers

This JavaScript example illustrates how to register a custom transformer with a Glide.js instance. Custom transformers are passed as an array to the `mutate()` method of the Glide instance. It is crucial to register transformers before calling the `mount()` method to ensure they are applied correctly during the slider's initialization and operation.

```javascript
var Example = function (Glide, Components, Events) {
  return {
    modify (translate) {
      //
    }
  }
}

new Glide('.glide')
  .mutate([Example])
  .mount()
```

--------------------------------

### Set Glide.js Drag Threshold

Source: https://glidejs.com/docs/options

This snippet demonstrates how to use the `dragThreshold` option in Glide.js to specify the minimum mouse drag distance needed to change a slide. The example shows how to dynamically modify this value via an input field or disable dragging by setting it to `false`, providing control over desktop interactions.

```JavaScript
var input = document.querySelector('#options-drag-threshold-input')

var glide = new Glide('#options-drag-threshold', {
  dragThreshold: input.value,
  perView: 3
})

input.addEventListener('input', function (event) {
  glide.update({
    dragThreshold: (event.target.value != 0) ? event.target.value : false
  })
})

glide.mount()
```

--------------------------------

### Configure Glide.js direction

Source: https://glidejs.com/docs/options

Sets the moving direction mode for the slider. Available inputs are 'ltr' (left to right movement) and 'rtl' (right to left movement). The default value is 'ltr', and it accepts a String type. This example demonstrates how to dynamically update the `direction` option of a Glide.js instance using a select dropdown.

```javascript
var select = document.querySelector('#options-direction-select')

var glide = new Glide('#options-direction', {
  direction: select.value,
  perView: 3
})

select.addEventListener('change', function (event) {
  glide.update({
    direction: event.target.value
  })
})

glide.mount()
```

--------------------------------

### Configure Glide.js peek distance

Source: https://glidejs.com/docs/options

Specifies the distance value of the next and previous viewports that 'peek' into the current view. It accepts a Number (for equal peeking on both sides) or an Object (for separate 'before' and 'after' peeking). The default value is 0. This example shows how to dynamically update the `peek` option of a Glide.js instance, allowing separate 'before' and 'after' values to be set via input fields.

```javascript
var before = document.querySelector('#options-peek-before')
var after = document.querySelector('#options-peek-after')

var glide = new Glide('#options-peek', {
  startAt: 1,
  perView: 3,
  peek: {
    before: before.value,
    after: after.value
  }
})

function peek () {
  glide.update({
    peek: {
      before: before.value,
      after: after.value
    }
  })
}

before.addEventListener('input', peek)
after.addEventListener('input', peek)

glide.mount()
```

--------------------------------

### Glide.js: Basic go() Method Usage

Source: https://glidejs.com/docs/api

Initializes a Glide.js instance and demonstrates a simple forward movement using the `go('>')` pattern.

```javascript
var glide = new Glide('.glide').mount()

glide.go('>')

```

--------------------------------

### Create a Custom Glide.js Transformer

Source: https://glidejs.com/docs/extending-transformers

This JavaScript example demonstrates how to define a custom transformer function for Glide.js. A transformer is a function that returns an object with a `modify()` method. The `modify()` method receives the current `translate` value and must return a new numeric `translate` value. This specific example increments the translate value by 100 pixels.

```javascript
/**
 * Update translate value by 100.
 *
 * @param  {Glide} Glide
 * @param  {Object} Components
 * @param  {EventsBus} Events
 * @return {Object}
 */
var Example = function (Glide, Components, Events) {
  return {
    /**
     * Modifies passed translate value by 100 pixels.
     *
     * @param  {Number} translate
     * @return {Number}
     */
    modify (translate) {
      return translate + 100
    }
  }
}
```

--------------------------------

### Build Module API Reference

Source: https://glidejs.com/docs/components/build

Detailed API documentation for the 'Build' module, outlining its methods and their respective usages.

```APIDOC
Build Module:
  Usage type: required
  Description: Responsible for adding type and switching active classes

  Methods:
    mount():
      Usage: Mounts and initializes a component
    typeClass():
      Usage: Applies type class based on the instance settings
    activeClass():
      Usage: Applies an active class to slides based on the current index
    removeClasses():
      Usage: Removes all classes applied by component
```

--------------------------------

### Glide Instance API Overview

Source: https://glidejs.com/docs/api

A structured overview of the Glide.js instance's properties and methods, including their types, descriptions, and arguments where applicable. This provides a quick reference to the available API surface.

```APIDOC
Glide Instance API:
  Properties:
    index:
      type: Number
      description: Holds currently active zero-based slide index.
    settings:
      type: Object
      description: Holds instance initialization settings.
    type:
      type: String
      description: Holds type of the Glide instance.
    disabled:
      type: Boolean
      description: Holds state of the ability to interact.
  Methods:
    mount():
      description: A Glide instance is in "uninitialized" mode until a `mount()` method call. It starts an entire building process.
    update(settings):
      arguments:
        settings:
          type: Object
      description: Update settings for the Glide instance.
    destroy():
      description: Destroy instance and undo all modifications which have been made to the DOM. It also unbinds added event listeners.
    on(event, [definition]):
      arguments:
        event:
          type: String|Array
        definition:
          type: Function
          optional: true
      description: Register callback which will be called at the specified events.
```

--------------------------------

### Glide.js Options Reference

Source: https://glidejs.com/docs/options

A comprehensive reference for all configurable options available when initializing a Glide.js instance. This includes detailed descriptions, default values, and expected data types for each option, providing a complete overview of the API.

```APIDOC
GlideOptions:
  __init__(selector: string, options: object)
    selector: CSS selector for the Glide container.
    options: Configuration object for Glide.js.

  Options:
    type: string
      description: Type of the movement. Available types: 'slider' (rewinds slider to the start/end when it reaches first or last slide), 'carousel' (changes slides without starting over when it reaches first or last slide).
      default: 'slider'
    startAt: number
      description: Start at specific slide number defined with zero-based index.
      default: 0
    perView: number
      description: A number of slides visible on the single viewport.
      default: 1
    focusAt: number | string
      description: Focus currently active slide at a specified position in the track. Available inputs: 'center' or zero-based index (1,2,3...). If 'center', the current slide will always be focused at the center of a track.
      default: 0
    gap: number
      description: A size of the space between slides.
    autoplay: number | boolean
      description: Change slides after a specified interval (milliseconds) or disable (false).
    hoverpause: boolean
      description: Stop autoplay on mouseover.
    keyboard: boolean
      description: Change slides with keyboard arrows.
    bound: boolean
      description: Stop running `perView` number of slides from the end.
    swipeThreshold: number
      description: Minimal swipe distance needed to change the slide.
    dragThreshold: number
      description: Minimal mousedrag distance needed to change the slide.
    perTouch: number
      description: A maximum number of slides moved per single swipe or drag.
    touchRatio: number
      description: Alternate moving distance ratio of swiping and dragging.
    touchAngle: number
      description: Angle required to activate slides moving.
    animationDuration: number
      description: Duration of the animation.
    rewind: boolean
      description: Allow looping the `slider` type.
    rewindDuration: number
      description: Duration of the rewinding animation.
    animationTimingFunc: string
      description: Easing function for the animation.
    direction: string
      description: Moving direction mode.
    peek: object | number
      description: The value of the future viewports which have to be visible in the current view. Can be a number or an object with left/right properties.
    breakpoints: object
      description: Collection of options applied at specified media breakpoints.
    classes: object
      description: Collection of used HTML classes.
    throttle: number
      description: Throttle costly events.
```

--------------------------------

### Access Glide Instance Type Property

Source: https://glidejs.com/docs/api

Shows how to get the `type` property of a Glide instance. This property indicates the type of the Glide instance, such as 'slider' or 'carousel', which can be useful for conditional logic.

```javascript
var glide = new Glide('.glide').mount()

var type = glide.type // => 'slider'
```

--------------------------------

### Glide.js Keyboard Module API Reference

Source: https://glidejs.com/docs/components/keyboard

Detailed API documentation for the Glide.js Keyboard module, outlining its methods. This includes `mount()` for initialization, `bind()` and `unbind()` for event listener management, and `press(event)` for handling key press events and triggering slider movement.

```APIDOC
Keyboard Module:
  mount():
    Usage: Mounts and initializes a component. Creates event listeners for keyboard key presses
  bind():
    Usage: Binds keyup event listener for key presses
  unbind():
    Usage: Removes previously added dragstart event
  press(event):
    Arguments:
      event: {Object} event
    Usage: keyup event handler. Makes movement base on arrow key direction
```

--------------------------------

### Glide.js Resize Module API Reference

Source: https://glidejs.com/docs/components/resize

Comprehensive API documentation for the Glide.js Resize module, detailing its required status and all available methods for managing instance resizing events.

```APIDOC
Resize Module:
  Usage type: required
  Description: Manages instance resizing events. This module is requisite and it's imported within a bundle.
  Methods:
    mount():
      Usage: Mounts and initializes a component. Creates event listeners at window object.
    bind():
      Usage: Adds throttled `resize` event.
    unbind():
      Usage: Removes previously added `resize` event.
```

--------------------------------

### Mount Glide Instance

Source: https://glidejs.com/docs/api

Demonstrates how to initialize a Glide instance by calling its `mount()` method. An instance remains uninitialized until `mount()` is called, which triggers the entire building process of the slider.

```javascript
var glide = new Glide('.glide')

glide.mount()
```

```javascript
var button = document.querySelector('#api-mount-button')

var glide = new Glide('#api-mount', {
  startAt: 0,
  perView: 3
})

button.addEventListener('click', function () {
  glide.mount()
})
```

--------------------------------

### Configure Glide.js animationDuration

Source: https://glidejs.com/docs/options

Sets the duration of the slide animation in milliseconds. The default value is 400ms, and it accepts a Number type. This example demonstrates how to dynamically update the `animationDuration` option of a Glide.js instance based on user input from an HTML input element.

```javascript
var input = document.querySelector('#options-animation-duration-input')

var glide = new Glide('#options-animation-duration', {
  animationDuration: input.value,
  perView: 3
})

input.addEventListener('input', function (event) {
  glide.update({
    animationDuration: event.target.value
  })
})

glide.mount()
```

--------------------------------

### Glide.js Transition Module API Reference

Source: https://glidejs.com/docs/components/transition

Detailed API reference for the Glide.js Transition module, including its properties and methods for controlling animation durations and applying/removing CSS transitions.

```APIDOC
Transition Module:
  Description: Controls transition durations of the instance.
  Usage: required (imported within a bundle).

  Properties:
    duration:
      Type: Number
      Usage: Holds duration of the transition based on currently running animation type.

  Methods:
    compose(property: String):
      Usage: Returns a value of CSS transition property based on duration.

    set(property: String):
      Usage: Applies transition declaration to wrapper HTML element.

    remove():
      Usage: Clears transition declarations from wrapper HTML element.

    after(callback: Function):
      Usage: Call specified callback after a transition.

    disable():
      Usage: Disables transitions. The instance will make immediate jumps to indexes instead of smooth movements.

    enable():
      Usage: Enables previously disabled transitions.
```

--------------------------------

### Importing and Mounting Glide.js Breakpoints Module

Source: https://glidejs.com/docs/components/breakpoints

This snippet demonstrates the standard way to import the Breakpoints module from the Glide.js library and then mount it to a new Glide instance. Mounting the module enables the slider to dynamically adjust its options based on active CSS media queries.

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

new Glide('.glide').mount({ Breakpoints })
```

--------------------------------

### Glide.js: Resume Autoplay with play() Method

Source: https://glidejs.com/docs/api

Initializes a Glide.js instance with autoplay, pauses it, and then resumes autoplay using the `play()` method without arguments.

```javascript
var glide = new Glide('.glide', { autoplay: 4000 }).mount()

glide.pause() // Pausing so we can resume it later

glide.play()

```

--------------------------------

### Import and Mount Anchors Module

Source: https://glidejs.com/docs/components/anchors

This code snippet demonstrates how to import the `Anchors` module from the Glide.js modular build and then mount it to a new `Glide` instance. This enables the Anchors functionality, allowing the slider to properly handle `<a>` elements within its slides.

```javascript
import Glide, { Anchors } from '@glidejs/glide/dist/glide.modular.esm'

new Glide('.glide').mount({ Anchors })
```

--------------------------------

### Configure Glide.js rewindDuration

Source: https://glidejs.com/docs/options

Sets the duration of the rewinding animation for the 'slider' type carousel in milliseconds. The default value is 800ms, and it accepts a Number type. This example demonstrates how to dynamically update the `rewindDuration` option of a Glide.js instance based on user input from an HTML input element.

```javascript
var input = document.querySelector('#options-rewind-duration-input')

var glide = new Glide('#options-rewind-duration', {
  rewindDuration: input.value,
  startAt: 9,
  perView: 3
})

input.addEventListener('input', function (event) {
  glide.update({
    rewindDuration: event.target.value
  })
})

glide.mount()
```

--------------------------------

### Move Module API Reference

Source: https://glidejs.com/docs/components/move

Comprehensive API documentation for the 'Move' module, detailing its properties and methods for managing movement calculations within the Glide.js slider.

```APIDOC
Move Module:
  Description: Responsible for calculating a movement distance.
  Usage Type: required

  Properties:
    value:
      Type: {Number}
      Usage: Holds an actual movement value corrected by an offset.
    translate:
      Type: {Number}
      Usage: Holds a raw movement value calculated based on the current index.
    offset:
      Type: {Number}
      Usage: Holds an offset value used to modify current translate value.

  Methods:
    mount():
      Usage: Mounts and initializes a component.
    make(offset):
      Arguments:
        offset: {Number}
      Usage: Calculates a movement value based on the passed offset and currently active index.
```

--------------------------------

### Clones Module API Reference

Source: https://glidejs.com/docs/components/clones

Comprehensive API documentation for the 'Clones' module, detailing its properties and methods for managing HTML element clones used in carousel looping within Glide.js.

```APIDOC
Clones Module:
  Usage: required

  Properties:
    items: {HTMLCollection}
      Usage: Holds collection HTML elements of the cloned slides
    pattern: {Array}
      Usage: Holds slides indexes pattern for cloning
    grow: {Number}
      Usage: Holds additional dimentions value caused by clone HTML elements

  Methods:
    mount():
      Usage: Mounts and initializes a component
    map(pattern: Array): Array
      Usage: Generates slides indexes pattern for cloning
    collect(items: HTMLCollection): HTMLCollection
      Usage: Creates a collection of cloned slides using indexes pattern
    append():
      Usage: Appends collection of clones into DOM using indexes pattern
    remove():
      Usage: Removes HTML elements of clones from the DOM
```

--------------------------------

### Configure Glide.js touchAngle

Source: https://glidejs.com/docs/options

Defines the angle required to activate slide movement when swiping or dragging. The default value is 45 degrees, and it accepts a Number type. This example shows how to dynamically update the `touchAngle` option of a Glide.js instance based on user input from an HTML input element.

```javascript
var input = document.querySelector('#options-touch-angle-input')

var glide = new Glide('#options-touch-angle', {
  touchAngle: input.value,
  perView: 3
})

input.addEventListener('input', function (event) {
  glide.update({
    touchAngle: event.target.value
  })
})

glide.mount()
```

--------------------------------

### Glide.js: Basic enable() Method Usage

Source: https://glidejs.com/docs/api

Initializes a Glide.js instance and immediately enables its interaction, useful for restoring control after a prior `disable()` call.

```javascript
var glide = new Glide('.glide').mount()

glide.enable()

```

--------------------------------

### Import and Mount Glide.js Swipe Module

Source: https://glidejs.com/docs/components/swipe

Demonstrates how to import the Swipe module from Glide.js and mount it to a new Glide instance for enabling swipe gestures. The Swipe module is optional and can be included as needed.

```javascript
import Glide, { Swipe } from '@glidejs/glide/dist/glide.modular.esm'

new Glide('.glide').mount({ Swipe })
```