pure-swipe-slider 1.0.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2026 kellas
+Based on Swipe.js by Brad Birdsall (Copyright (c) 2013, MIT License)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,341 @@
+# Pure Swipe Slider Web Component
+
+[![Bundle Size](https://img.shields.io/badge/gzipped_size-%3C_4_KB-blue)](https://github.com/alexstep/swipe-slider)
+[![Dependencies](https://img.shields.io/badge/dependencies-zero-brightgreen)](https://github.com/alexstep/swipe-slider)
+[![License](https://img.shields.io/badge/license-MIT-yellow)](./LICENSE)
+[![NPM Version](https://img.shields.io/npm/v/pure-swipe-slider)](https://www.npmjs.com/package/pure-swipe-slider)
+
+[**Live Demo**](https://alexstep.github.io/swipe-slider/demo.html)
+
+A tiny, zero-dependency swipe slider as a Web Component (< 4 KB gzipped).
+Framework-agnostic, mobile-first, event-driven.
+
+Built on top of Swipe.js with modernized internals, Pointer Events, GPU-accelerated transforms, and a clean Custom Events interface.
+
+## Two ways to use
+
+- `<swipe-slider>` — Web Component for 99% of cases
+- `swipe3.js` — low-level engine for advanced / legacy layouts
+
+## Features
+
+- **Full API access**: call `next()`, `prev()`, `slide()` directly on the element
+- **Unified input handling**: touch, mouse, wheel, pen via Pointer Events
+- **Mobile-optimized**: smooth 60fps animations with iOS overscroll handling
+- **Framework-ready**: standard HTML tag with Custom Events
+- **Flexible content**: images, dates, complex layouts, and dynamic slides
+- **Performance-first**: GPU acceleration and modern optimizations
+- **No build step**: works directly in modern browsers
+
+## Installation
+
+### From NPM
+
+```bash
+npm install pure-swipe-slider
+```
+
+### Quick Start
+
+Simply import the component with default tag registration:
+
+```javascript
+import 'pure-swipe-slider/register.js';
+```
+
+### Custom Tag Registration
+
+Import the class separately to register with your own tag name:
+
+```javascript
+import SwipeSlider from 'pure-swipe-slider';
+
+// Register with custom tag name
+customElements.define('my-slider', SwipeSlider);
+```
+
+Then use it in HTML:
+
+```html
+<my-slider>
+  <div>Slide 1</div>
+  <div>Slide 2</div>
+</my-slider>
+```
+
+## Class Usage
+
+The `SwipeSlider` class can be extended for custom behavior:
+
+```javascript
+import SwipeSlider from './swipe-slider.js';
+
+class MyCustomSlider extends SwipeSlider {
+  connectedCallback() {
+    super.connectedCallback();
+    // Custom initialization
+    this.style.border = '2px solid blue';
+  }
+}
+
+// Register custom class
+customElements.define('my-custom-slider', MyCustomSlider);
+```
+
+## Usage
+
+### Basic Example
+
+```html
+<swipe-slider draggable mousewheel>
+  <div>Slide 1</div>
+  <div>Slide 2</div>
+  <div>Slide 3</div>
+</swipe-slider>
+```
+
+With default tag registration:
+
+```javascript
+import './register.js';
+```
+
+### With Event Listeners
+
+```javascript
+const slider = document.querySelector('swipe-slider');
+
+slider.addEventListener('swipe:change', (e) => {
+  const { index, element, direction } = e.detail;
+  console.log(`Swiped to index ${index} in direction ${direction}`);
+});
+```
+
+## API Reference
+
+### Attributes
+
+Boolean attributes follow HTML semantics: presence = `true`, absence = `false`.
+
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `start-slide` | Number | `0` | Initial slide index. |
+| `speed` | Number | `400` | Transition speed in milliseconds. |
+| `draggable` | Boolean | `false` | Enable mouse dragging. |
+| `mousewheel` | Boolean | `true` | Enable mouse wheel navigation. Use `no-mousewheel` to disable. |
+| `disable-scroll` | Boolean | `false` | Disable vertical scrolling while swiping. |
+| `stop-propagation` | Boolean | `false` | Stop event propagation. |
+| `passive-events` | Boolean | `false` | Use passive event listeners (may improve performance but breaks preventDefault). |
+| `loop` | Boolean | `false` | Enable infinite circular loop (moves slides dynamically). |
+| `auto-height` | Boolean \| Number | `false` | Enable automatic height adjustment. Optional value sets min-height. |
+
+### Events
+
+All events are dispatched as CustomEvent with `{ bubbles: true, composed: true }`.
+
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `swipe:change` | `{ index, element, direction }` | Fired when the active slide changes. |
+| `swipe:transition-end` | `{ index, element }` | Fired when the transition finishes. |
+| `swipe:drag-start` | `{ index, element }` | Fired when dragging starts. |
+| `swipe:drag-end` | `{ index, element }` | Fired when dragging ends. |
+| `swipe:move` | `none` | Fired during movement (high-frequency event, use sparingly). |
+
+### Methods
+
+All `swipe.js` methods are proxied:
+
+- `slide(to, speed)`
+- `prev()`
+- `next()`
+- `getPos()`
+- `getNumSlides()`
+- `kill()`
+- `setup(options)`
+- `appendSlide(element)`
+- `prependSlide(element)`
+- `adjustHeight(element)`
+
+## Direct Usage (swipe3.js)
+
+For advanced use cases or when you don't need the web component wrapper, you can use `swipe3.js` directly:
+
+### Import
+
+```javascript
+import Swipe from './swipe3.js';
+```
+
+### HTML Structure
+
+```html
+<div id="slider-container">
+  <div class="slides">
+    <div>Slide 1</div>
+    <div>Slide 2</div>
+    <div>Slide 3</div>
+  </div>
+</div>
+```
+
+### JavaScript Usage
+
+```javascript
+// Initialize
+const container = document.getElementById('slider-container');
+const swipeInstance = Swipe(container, {
+  speed: 400,        // Transition speed in ms
+  startSlide: 0,     // Initial slide index
+  draggable: true,   // Enable mouse dragging
+  mousewheel: true, // Enable mouse wheel navigation
+  disableScroll: false, // Prevent vertical scrolling during swipe
+  stopPropagation: false, // Stop event propagation
+  passive: false,    // Use passive event listeners
+
+  // Callbacks
+  callback(index, element, direction) {
+    console.log(`Swiped to slide ${index} in direction ${direction}`);
+  },
+
+  transitionEnd(index, element) {
+    console.log(`Transition ended at slide ${index}`);
+  },
+
+  dragStart(index, element) {
+    console.log(`Drag started at slide ${index}`);
+  },
+
+  dragEnd(index, element) {
+    console.log(`Drag ended at slide ${index}`);
+  },
+
+  runMove() {
+    console.log('Moving during drag');
+  }
+});
+
+// Use API methods
+swipeInstance.next();           // Go to next slide
+swipeInstance.prev();           // Go to previous slide
+swipeInstance.slide(2);         // Go to slide at index 2
+swipeInstance.getPos();         // Get current slide index
+swipeInstance.getNumSlides();   // Get total number of slides
+
+// Add slides dynamically
+const newSlide = document.createElement('div');
+newSlide.textContent = 'New Slide';
+swipeInstance.appendSlide(newSlide);
+
+// Cleanup when done
+swipeInstance.kill();
+```
+
+### Required CSS
+
+When using directly, you'll need to add basic CSS:
+
+```css
+#slider-container {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+}
+
+.slides {
+  position: relative;
+  white-space: nowrap;
+}
+
+.slides > * {
+  display: inline-block;
+  vertical-align: top;
+  white-space: normal;
+}
+```
+
+### Options Reference
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `speed` | Number | `400` | Transition speed in milliseconds |
+| `startSlide` | Number | `0` | Initial slide index |
+| `draggable` | Boolean | `false` | Enable mouse dragging |
+| `mousewheel` | Boolean | `true` | Enable mouse wheel navigation |
+| `disableScroll` | Boolean | `false` | Disable vertical scrolling while swiping |
+| `stopPropagation` | Boolean | `false` | Stop event propagation |
+| `ignore` | String | `null` | CSS selector for elements to ignore (e.g., "button, a") |
+| `passive` | Boolean | `false` | Use passive event listeners (may improve performance but breaks preventDefault) |
+
+### Callback Functions
+
+All callbacks receive `(index, element)` parameters where:
+- `index`: Current slide index (0-based)
+- `element`: Current slide DOM element
+
+| Callback | Parameters | Description |
+|----------|------------|-------------|
+| `callback` | `(index, element, direction)` | Fired when slide changes (direction: -1 for prev, 1 for next) |
+| `transitionEnd` | `(index, element)` | Fired when transition animation completes |
+| `dragStart` | `(index, element)` | Fired when dragging starts |
+| `dragEnd` | `(index, element)` | Fired when dragging ends |
+| `runMove` | `none` | Fired during dragging movement |
+
+### API Methods
+
+| Method | Parameters | Description |
+|--------|------------|-------------|
+| `slide(to, speed?)` | `to`: slide index, `speed?`: optional transition speed | Navigate to specific slide |
+| `prev()` | none | Go to previous slide |
+| `next()` | none | Go to next slide |
+| `getPos()` | none | Get current slide index |
+| `getNumSlides()` | none | Get total number of slides |
+| `appendSlide(element)` | `element`: DOM element | Add slide at the end |
+| `prependSlide(element)` | `element`: DOM element | Add slide at the beginning |
+| `setup(options?)` | `options?`: new options object | Reinitialize with new options |
+| `kill()` | none | Destroy instance and cleanup events/styles |
+
+## CSS Customization
+
+The component provides a minimal CSS structure with a built-in height transition (0.2s linear) for `auto-height` mode. You can customize the look using standard CSS:
+
+```css
+swipe-slider {
+  /* container styles */
+}
+
+.swipe-slider-wrapper > * {
+  /* slide styles */
+}
+```
+
+## When this is not a good fit
+
+- If you need virtualized slides (1000+ items)
+- If you rely heavily on React/Vue-specific lifecycles
+- If you need autoplay / pagination / thumbnails out of the box
+- If you need complex state management or data binding
+
+## License
+
+MIT
+
+## Performance Optimizations (swipe3.js)
+
+The internal `swipe3.js` engine includes these optimizations for smooth mobile performance:
+
+| Optimization | Description |
+|-------------|-------------|
+| GPU-accelerated transforms | `translate3d` for hardware acceleration instead of `translateX` |
+| will-change hints | Browser hints to create compositor layers for smoother animations |
+| Pointer Events API | Unified touch/mouse/pen input handling with fallbacks |
+| Passive event listeners | Non-blocking touch listeners where possible (via `passive-events` attr) |
+| Reduced layout thrashing | Batched DOM reads/writes to minimize reflows |
+| Modern ES6+ syntax | Latest JavaScript features for better performance and maintainability |
+| Size (Gzipped) | < 4 KB for the entire component (JS + CSS) |
+
+## Size
+
+| Metric | JavaScript | CSS | Total |
+|--------|------------|-----|-------|
+| Minified | 9.8 KB | 0.3 KB | **10.1 KB** |
+| Minified + Gzip | 3.2 KB | 0.2 KB | **3.4 KB** |

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "pure-swipe-slider",
+  "version": "1.0.0",
+  "description": "A tiny, zero-dependency swipe slider web component (< 4 KB gzipped).",
+  "main": "swipe-slider.js",
+  "module": "swipe-slider.js",
+  "files": [
+    "swipe-slider.js",
+    "swipe3.js",
+    "swipe-slider.css",
+    "register.js",
+    "LICENSE",
+    "README.md"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alexstep/swipe-slider.git"
+  },
+  "keywords": [
+    "web-component",
+    "swipe",
+    "slider",
+    "carousel",
+    "touch",
+    "mobile-first",
+    "pointer-events"
+  ],
+  "author": "alexstep",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/alexstep/swipe-slider/issues"
+  },
+  "homepage": "https://github.com/alexstep/swipe-slider#readme"
+}

package/register.js

@@ -0,0 +1,4 @@
+import './swipe-slider.css'
+import SwipeSlider from './swipe-slider.js'
+
+customElements.define('swipe-slider', SwipeSlider)

package/swipe-slider.css

@@ -0,0 +1,24 @@
+swipe-slider {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  position: relative;
+  transition: height 0.2s linear;
+  will-change: height;
+
+  .swipe-slider-wrapper {
+    overflow: hidden;
+    position: relative;
+    height: 100%;
+    touch-action: pan-y;
+
+    & > * {
+      float: left;
+      width: 100%;
+      position: relative;
+      box-sizing: border-box;
+      will-change: transform;
+    }
+  }
+}

package/swipe-slider.js

@@ -0,0 +1,168 @@
+import Swipe from './swipe3.js'
+
+/**
+ * Universal Swipe Slider Web Component
+ * Wrapper around swipe.js
+ */
+export default class SwipeSlider extends HTMLElement {
+  constructor() {
+    super()
+    this.swipe = null
+  }
+
+  connectedCallback() {
+    this.init()
+  }
+  disconnectedCallback() {
+    this.kill()
+  }
+
+  _emit(name, detail = {}) {
+    this.dispatchEvent(new CustomEvent(`swipe:${name}`, { detail, bubbles: true }))
+  }
+
+  _idx(el, i) {
+    const li = el?.dataset?.logicalIndex
+    return li !== undefined ? +li : i
+  }
+
+  init(options = {}) {
+    if (this.swipe) this.kill()
+
+    const get = a => this.getAttribute(a)
+    const has = a => this.hasAttribute(a)
+    const autoH = get('auto-height')
+    const isLoop = has('loop')
+
+    const sOpts = {
+      startSlide: +(get('start-slide') || 0),
+      speed: +(get('speed') || 400),
+      draggable: has('draggable'),
+      mousewheel: !has('no-mousewheel'),
+      disableScroll: has('disable-scroll'),
+      stopPropagation: has('stop-propagation'),
+      passive: has('passive-events'),
+      ...options,
+      callback: (i, el, dir) => {
+        if (autoH !== null) this.adjustHeight(el)
+
+        if (isLoop && this.swipe) {
+          const total = this.swipe.getNumSlides()
+          const method = i === total - 1 ? 'appendSlide' : i === 0 ? 'prependSlide' : null
+          if (method) {
+            const wrapper = this.querySelector('.swipe-slider-wrapper')
+            const slide = method[0] === 'a' ? wrapper?.firstElementChild : wrapper?.lastElementChild
+            if (slide) this[method](slide)
+          }
+        }
+
+        this._emit('change', { index: this._idx(el, i), element: el, direction: dir })
+        options.callback?.(i, el, dir)
+      },
+      transitionEnd: (i, el) => {
+        this._emit('transition-end', { index: i, element: el })
+        options.transitionEnd?.(i, el)
+      },
+      dragStart: (i, el) => {
+        this._emit('drag-start', { index: i, element: el })
+        options.dragStart?.(i, el)
+      },
+      dragEnd: (i, el) => {
+        this._emit('drag-end', { index: i, element: el })
+        options.dragEnd?.(i, el)
+      },
+      runMove: () => {
+        this._emit('move')
+        options.runMove?.()
+      },
+    }
+
+    let wrapper = this.querySelector('.swipe-slider-wrapper')
+    if (!wrapper) {
+      wrapper = document.createElement('div')
+      wrapper.className = 'swipe-slider-wrapper'
+      let i = 0
+      while (this.firstChild) {
+        const child = this.firstChild
+        if (child instanceof HTMLElement) child.dataset.logicalIndex = String(i++)
+        wrapper.appendChild(child)
+      }
+      this.appendChild(wrapper)
+    } else {
+      ;[...wrapper.children].forEach((c, i) => {
+        if (c instanceof HTMLElement && !c.dataset.logicalIndex) c.dataset.logicalIndex = String(i)
+      })
+    }
+
+    if (isLoop && wrapper.children.length > 1) {
+      const first = wrapper.firstElementChild
+      const last = wrapper.lastElementChild
+      if (sOpts.startSlide === 0 && last) {
+        wrapper.prepend(last)
+        sOpts.startSlide = 1
+      } else if (sOpts.startSlide === wrapper.children.length - 1 && first) {
+        wrapper.append(first)
+        sOpts.startSlide = wrapper.children.length - 2
+      }
+    }
+
+    requestAnimationFrame(() => {
+      // @ts-ignore
+      this.swipe = new Swipe(this, sOpts)
+      if (autoH !== null) {
+        const slides = this.querySelectorAll('.swipe-slider-wrapper > *')
+        const active = this.swipe?.getPos()
+        if (active !== undefined && slides[active]) this.adjustHeight(slides[active])
+      }
+      this.dataset.ready = 'true'
+    })
+  }
+
+  adjustHeight(el) {
+    if (!el) return
+    const min = +(this.getAttribute('auto-height') || 0)
+    this.style.height = Math.max(el.offsetHeight, min) + 'px'
+  }
+
+  slide(to, s) {
+    return this.swipe?.slide(to, s)
+  }
+  prev() {
+    if (this.hasAttribute('loop') && this.swipe?.getPos() === 0) {
+      const s = this.querySelector('.swipe-slider-wrapper')?.lastElementChild
+      if (s instanceof HTMLElement) this.prependSlide(s)
+    }
+    return this.swipe?.prev()
+  }
+  next() {
+    if (this.hasAttribute('loop') && this.swipe?.getPos() === this.swipe?.getNumSlides() - 1) {
+      const s = this.querySelector('.swipe-slider-wrapper')?.firstElementChild
+      if (s instanceof HTMLElement) this.appendSlide(s)
+    }
+    return this.swipe?.next()
+  }
+  getPos() {
+    const i = this.swipe ? this.swipe.getPos() : 0
+    const slides = this.querySelectorAll('.swipe-slider-wrapper > *')
+    return this._idx(slides[i], i)
+  }
+  getNumSlides() {
+    return this.swipe?.getNumSlides()
+  }
+  kill() {
+    if (this.swipe) {
+      this.swipe.kill()
+      this.swipe = null
+    }
+    delete this.dataset.ready
+  }
+  setup(o) {
+    this.swipe?.setup(o)
+  }
+  appendSlide(s) {
+    this.swipe?.appendSlide(s)
+  }
+  prependSlide(s) {
+    this.swipe?.prependSlide(s)
+  }
+}

package/swipe3.js

@@ -0,0 +1,476 @@
+/**
+ * Swipe 3.0 - Optimized for mobile performance
+ * Based on https://github.com/thebird/Swipe
+ */
+
+const root = typeof self === 'object' && self.self === self ? self : typeof globalThis === 'object' ? globalThis : this
+
+function debounce(fn, delay = 150) {
+  let timeoutId = null
+
+  function debounced(...args) {
+    if (timeoutId) clearTimeout(timeoutId)
+    timeoutId = setTimeout(() => {
+      timeoutId = null
+      fn.apply(this, args)
+    }, delay)
+  }
+
+  debounced.cancel = () => {
+    if (timeoutId) {
+      clearTimeout(timeoutId)
+      timeoutId = null
+    }
+  }
+
+  return debounced
+}
+
+function isCancelable(event) {
+  return event && (typeof event.cancelable !== 'boolean' || event.cancelable)
+}
+
+const supports = {
+  pointerEvents: 'PointerEvent' in root,
+  touch: 'ontouchstart' in root,
+}
+
+const EASING = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'
+
+function Swipe(container, options = {}) {
+  if (!container) return null
+
+  const config = {
+    speed: 400,
+    startSlide: 0,
+    draggable: false,
+    mousewheel: true,
+    disableScroll: false,
+    stopPropagation: false,
+    ignore: null,
+    ...options,
+  }
+
+  let start = {}
+  let delta = {}
+  let isScrolling
+  let index = parseInt(config.startSlide, 10) || 0
+
+  const element = container.children[0]
+  if (!element) return null
+
+  let slides, slidePos, width, length
+
+  const slideDir = (() => {
+    const dir = root.getComputedStyle?.(container, null)?.getPropertyValue('direction')
+    return dir === 'rtl' ? 'right' : 'left'
+  })()
+
+  const debouncedSetup = debounce(setup, 150)
+  let wheelEndTimeout = null
+
+  const run = (name, ...args) => config[name]?.(...args)
+
+  // Unified event handlers
+  const events = {
+    handleEvent(event) {
+      switch (event.type) {
+        case 'pointerdown':
+          this.onStart(event, event.clientX, event.clientY, event.pointerId)
+          break
+        case 'pointermove':
+          if (event.isPrimary && event.pointerId === start.pointerId) {
+            this.onMove(event, event.clientX, event.clientY)
+          }
+          break
+        case 'pointerup':
+        case 'pointercancel':
+        case 'pointerleave':
+          this.onEnd(event, 'pointer')
+          break
+
+        case 'touchstart':
+          if (event.touches[0]) {
+            this.onStart(event, event.touches[0].pageX, event.touches[0].pageY)
+          }
+          break
+        case 'touchmove':
+          if (event.touches.length === 1 && !(event.scale && event.scale !== 1)) {
+            this.onMove(event, event.touches[0].pageX, event.touches[0].pageY)
+          }
+          break
+        case 'touchend':
+          this.onEnd(event, 'touch')
+          break
+
+        case 'mousedown':
+          event.preventDefault()
+          this.onStart(event, event.pageX, event.pageY)
+          break
+        case 'mousemove':
+          this.onMove(event, event.pageX, event.pageY)
+          break
+        case 'mouseup':
+        case 'mouseleave':
+          this.onEnd(event, 'mouse')
+          break
+
+        case 'transitionend':
+          if (parseInt(event.target.getAttribute('data-index'), 10) === index) {
+            run('transitionEnd', index, slides[index])
+          }
+          break
+        case 'resize':
+          debouncedSetup()
+          break
+        case 'wheel':
+          this.onWheel(event)
+          break
+      }
+
+      if (config.stopPropagation) event.stopPropagation()
+    },
+
+    captured: false,
+
+    onStart(event, x, y, pointerId) {
+      if (event.type === 'pointerdown' && !event.isPrimary) return
+      if (config.ignore && event.target.matches(config.ignore)) return
+
+      start = { x, y, time: Date.now(), pointerId }
+      isScrolling = undefined
+      delta = {}
+      this.captured = false
+
+      if (event.type === 'pointerdown') {
+        element.addEventListener('pointermove', this, { passive: false })
+        element.addEventListener('pointerup', this)
+        element.addEventListener('pointercancel', this)
+        element.addEventListener('pointerleave', this)
+      } else if (event.type === 'touchstart') {
+        element.addEventListener('touchmove', this, { passive: false })
+        element.addEventListener('touchend', this)
+      } else {
+        element.addEventListener('mousemove', this)
+        element.addEventListener('mouseup', this)
+        element.addEventListener('mouseleave', this)
+      }
+
+      run('dragStart', index, slides[index])
+    },
+
+    onMove(event, x, y) {
+      delta = { x: x - start.x, y: y - start.y }
+
+      if (isScrolling === undefined) {
+        const sensitivity = 10
+        isScrolling = Math.abs(delta.y) > Math.abs(delta.x) + sensitivity
+
+        if (!isScrolling && !this.captured && event.type === 'pointermove') {
+          element.setPointerCapture(event.pointerId)
+          this.captured = true
+        }
+      }
+
+      if (!isScrolling) {
+        if (isCancelable(event)) event.preventDefault()
+        run('runMove')
+
+        const resistedDelta = applyResistance(delta.x)
+        translate(index - 1, resistedDelta + slidePos[index - 1], 0)
+        translate(index, resistedDelta + slidePos[index], 0)
+        translate(index + 1, resistedDelta + slidePos[index + 1], 0)
+      } else if (config.disableScroll && isCancelable(event)) {
+        event.preventDefault()
+      }
+    },
+
+    onEnd(event, type) {
+      if (type === 'pointer' && !event.isPrimary) return
+
+      if (this.captured) {
+        element.releasePointerCapture(event.pointerId)
+        this.captured = false
+      }
+
+      if (type === 'pointer') {
+        element.removeEventListener('pointermove', this)
+        element.removeEventListener('pointerup', this)
+        element.removeEventListener('pointercancel', this)
+        element.removeEventListener('pointerleave', this)
+      } else if (type === 'touch') {
+        element.removeEventListener('touchmove', this)
+        element.removeEventListener('touchend', this)
+      } else {
+        element.removeEventListener('mousemove', this)
+        element.removeEventListener('mouseup', this)
+        element.removeEventListener('mouseleave', this)
+      }
+
+      this.finishSwipe()
+    },
+
+    onWheel(event) {
+      let deltaX = event.deltaX
+      let deltaY = event.deltaY
+      if (event.deltaMode === 1) {
+        deltaX *= 40
+        deltaY *= 40
+      } else if (event.deltaMode === 2) {
+        deltaX *= width
+        deltaY *= width
+      }
+
+      if (Math.abs(deltaX) < 3) return
+      if (isCancelable(event)) event.preventDefault()
+
+      if (!delta.x) start.time = Date.now()
+
+      let slower = 0.7
+      const absDelta = Math.abs(delta.x || 0)
+      if (absDelta > width * 0.5) slower = 0.3
+      if (absDelta > width) slower = 0.1
+      if (absDelta > width * 1.5) slower = 0.05
+      if (absDelta > width * 2) slower = 0.01
+
+      delta = {
+        x: (delta.x || 0) - deltaX * slower,
+        y: (delta.y || 0) - deltaY * 0.5,
+      }
+
+      const resistedDelta = applyResistance(delta.x)
+      translate(index - 1, resistedDelta + slidePos[index - 1], 0)
+      translate(index, resistedDelta + slidePos[index], 0)
+      translate(index + 1, resistedDelta + slidePos[index + 1], 0)
+
+      if (wheelEndTimeout) clearTimeout(wheelEndTimeout)
+      wheelEndTimeout = setTimeout(() => {
+        this.finishSwipe()
+        delta = {}
+        wheelEndTimeout = null
+      }, 50)
+    },
+
+    finishSwipe() {
+      const duration = Date.now() - start.time
+      const absX = Math.abs(delta.x || 0)
+      const isValidSlide = (duration < 250 && absX > 20) || absX > width / 2
+      const isPastBounds = (!index && delta.x > 0) || (index === slides.length - 1 && delta.x < 0)
+      const direction = delta.x ? Math.abs(delta.x) / delta.x : 0
+
+      if (!isScrolling && delta.x) {
+        if (isValidSlide && !isPastBounds) {
+          if (direction < 0) {
+            move(index - 1, -width, 0)
+            move(index, slidePos[index] - width, config.speed)
+            move(circle(index + 1), slidePos[circle(index + 1)] - width, config.speed)
+            index = circle(index + 1)
+          } else {
+            move(index + 1, width, 0)
+            move(index, slidePos[index] + width, config.speed)
+            move(circle(index - 1), slidePos[circle(index - 1)] + width, config.speed)
+            index = circle(index - 1)
+          }
+          run('callback', index, slides[index], direction)
+        } else {
+          move(index - 1, -width, config.speed)
+          move(index, 0, config.speed)
+          move(index + 1, width, config.speed)
+        }
+      }
+
+      run('dragEnd', index, slides[index])
+    },
+  }
+
+  function applyResistance(deltaX) {
+    const atStart = !index && deltaX > 0
+    const atEnd = index === slides.length - 1 && deltaX < 0
+    if (atStart || atEnd) {
+      return deltaX / (Math.abs(deltaX) / width + 1)
+    }
+    return deltaX
+  }
+
+  function circle(idx) {
+    return (slides.length + (idx % slides.length)) % slides.length
+  }
+
+  function move(idx, dist, speed) {
+    translate(idx, dist, speed)
+    slidePos[idx] = dist
+  }
+
+  function translate(idx, dist, speed) {
+    const slide = slides[idx]
+    if (!slide?.style) return
+
+    slide.style.transitionDuration = speed + 'ms'
+    slide.style.transitionTimingFunction = EASING
+    slide.style.transform = `translate3d(${dist}px, 0, 0)`
+  }
+
+  function setup(opts) {
+    if (opts) Object.assign(config, opts)
+
+    slides = element.children
+    length = slides.length
+
+    if (!length) return
+
+    width = container.getBoundingClientRect().width || container.offsetWidth
+
+    slidePos = new Array(length)
+    element.style.width = length * width * 2 + 'px'
+
+    for (let i = length - 1; i >= 0; i--) {
+      const slide = slides[i]
+
+      slide.style.willChange = 'transform'
+      slide.style.width = width + 'px'
+      slide.setAttribute('data-index', i)
+      slide.style[slideDir] = i * -width + 'px'
+
+      if (slideDir === 'right') {
+        slide.style.float = 'right'
+      }
+
+      const initialDist = index > i ? -width : index < i ? width : 0
+      move(i, initialDist, 0)
+    }
+
+    detachEvents()
+    attachEvents()
+  }
+
+  function attachEvents() {
+    if (supports.pointerEvents) {
+      element.addEventListener('pointerdown', events)
+    } else if (supports.touch) {
+      element.addEventListener('touchstart', events)
+    }
+
+    if (config.draggable && !supports.pointerEvents) {
+      element.addEventListener('mousedown', events)
+    }
+
+    if (config.mousewheel) {
+      element.addEventListener('wheel', events, { passive: false })
+    }
+
+    element.addEventListener('transitionend', events)
+    root.addEventListener('resize', events)
+  }
+
+  function detachEvents() {
+    if (supports.pointerEvents) {
+      element.removeEventListener('pointerdown', events)
+      element.removeEventListener('pointermove', events)
+      element.removeEventListener('pointerup', events)
+      element.removeEventListener('pointercancel', events)
+    } else {
+      element.removeEventListener('touchstart', events)
+      element.removeEventListener('touchmove', events)
+      element.removeEventListener('touchend', events)
+    }
+
+    element.removeEventListener('mousedown', events)
+    element.removeEventListener('mousemove', events)
+    element.removeEventListener('mouseup', events)
+    element.removeEventListener('mouseleave', events)
+
+    element.removeEventListener('wheel', events)
+    element.removeEventListener('transitionend', events)
+    root.removeEventListener('resize', events)
+  }
+
+  const getPos = () => index
+
+  function slideTo(to, slideSpeed) {
+    to = typeof to === 'number' ? to : parseInt(to, 10)
+
+    if (index === to) return
+
+    const direction = Math.abs(index - to) / (index - to)
+    let diff = Math.abs(index - to) - 1
+
+    while (diff--) {
+      move(circle((to > index ? to : index) - diff - 1), width * direction, 0)
+    }
+
+    to = circle(to)
+
+    move(index, width * direction, slideSpeed ?? config.speed)
+    move(to, 0, slideSpeed ?? config.speed)
+
+    index = to
+
+    requestAnimationFrame(() => {
+      run('callback', index, slides[index], direction)
+    })
+  }
+
+  function prev() {
+    slideTo(index - 1)
+  }
+
+  function next() {
+    if (index < slides.length - 1) {
+      slideTo(index + 1)
+    }
+  }
+
+  function kill() {
+    element.style.width = ''
+    element.style[slideDir] = ''
+
+    for (let i = slides.length - 1; i >= 0; i--) {
+      const slide = slides[i]
+
+      if (slide.getAttribute('data-cloned')) {
+        slide.parentElement?.removeChild(slide)
+        continue
+      }
+
+      slide.style.width = ''
+      slide.style[slideDir] = ''
+      slide.style.transitionDuration = ''
+      slide.style.transform = ''
+      slide.style.willChange = ''
+    }
+
+    detachEvents()
+    debouncedSetup.cancel()
+
+    if (wheelEndTimeout) {
+      clearTimeout(wheelEndTimeout)
+      wheelEndTimeout = null
+    }
+  }
+
+  setup()
+
+  return {
+    setup,
+    slide: slideTo,
+    prev,
+    next,
+    getPos,
+    getNumSlides: () => length,
+    setIndex: newIndex => {
+      index = newIndex
+    },
+    appendSlide: slide => {
+      element.appendChild(slide)
+      setup()
+    },
+    prependSlide: slide => {
+      element.prepend(slide)
+      index++
+      setup()
+    },
+    kill,
+  }
+}
+
+export default Swipe