slickless 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 yfxie
+
+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,94 @@
+<div align="center">
+
+# slickless
+
+A jQuery-free rewrite of slick. Same option names, no runtime dependencies, ~8 KB gzipped.
+
+[![npm](https://img.shields.io/npm/v/slickless.svg)](https://www.npmjs.com/package/slickless)
+[![bundle](https://img.shields.io/bundlephobia/minzip/slickless)](https://bundlephobia.com/package/slickless)
+[![license](https://img.shields.io/npm/l/slickless.svg)](./LICENSE)
+
+[Live demo, options, API, recipes →](https://yfxie.github.io/slickless/)
+
+📖 Languages: **English** · [繁體中文](./README.zh-TW.md)
+
+</div>
+
+---
+
+## Why
+
+Slick is the most-installed carousel of the jQuery era. The behaviour still holds up, but pulling jQuery into a modern bundle just for one widget no longer does.
+
+| | slick | slickless |
+|---|---|---|
+| Dependencies | jQuery | none |
+| Type declarations | community | shipped |
+| Touch + mouse + pen | separate code paths | unified Pointer Events |
+| Resize handling | `window.resize` | `ResizeObserver` |
+| Reduced-motion respect | manual | built-in |
+| ARIA roles | partial | full carousel pattern |
+| Gzipped (core + CSS) | ~11 kB + jQuery (~24–30 kB) | ~8 kB, no deps |
+
+Most option names carry straight over: `slidesToShow`, `infinite`, `fade`, `centerMode`, `asNavFor`, `customPaging`, `responsive`. The DOM uses BEM class names (`.slickless__track`, `.slickless__slide`, …) and you construct with `new Slickless(el, options)`. So it's a rename pass, not a drop-in.
+
+## Install
+
+```bash
+bun add slickless
+# or
+pnpm add slickless
+# or
+npm install slickless
+```
+
+## Use
+
+```js
+import { Slickless } from "slickless";
+import "slickless/style.css";
+
+const carousel = new Slickless("#my-carousel", {
+  slidesToShow: 3,
+  dots: true,
+  autoplay: true,
+});
+
+carousel.on("afterChange", ({ currentSlide }) => {
+  console.log("now on", currentSlide);
+});
+```
+
+```html
+<div id="my-carousel">
+  <div>Slide 1</div>
+  <div>Slide 2</div>
+  <div>Slide 3</div>
+</div>
+```
+
+Each direct child becomes a slide. Add `data-lazy="…"` on `<img>` to defer image loads.
+
+## Documentation
+
+Options, API, events and styling recipes live on the demo:
+
+**[yfxie.github.io/slickless](https://yfxie.github.io/slickless/)**
+
+## Browser support
+
+Modern evergreen browsers (Chrome, Edge, Firefox, Safari ≥ 14). Pointer Events, `ResizeObserver` and CSS custom properties are required.
+
+## Development
+
+```bash
+bun install
+bun run dev          # demo dev server
+bun run test         # vitest
+bun run build        # library bundle + d.ts
+bun run build:demo   # demo build → demo-dist/
+```
+
+## License
+
+[MIT](./LICENSE)

package/README.zh-TW.md

@@ -0,0 +1,94 @@
+<div align="center">
+
+# slickless
+
+slick carousel 拿掉 jQuery 的重寫版。選項名稱不變，零執行期依賴，gzip 約 8 KB。
+
+[![npm](https://img.shields.io/npm/v/slickless.svg)](https://www.npmjs.com/package/slickless)
+[![bundle](https://img.shields.io/bundlephobia/minzip/slickless)](https://bundlephobia.com/package/slickless)
+[![license](https://img.shields.io/npm/l/slickless.svg)](./LICENSE)
+
+[線上範例、選項、API、樣式技巧 →](https://yfxie.github.io/slickless/)
+
+📖 語言：[English](./README.md) · **繁體中文**
+
+</div>
+
+---
+
+## 為什麼
+
+slick 是 jQuery 時代裝機量最高的 carousel，行為到現在還很扎實。但為了一個 carousel 把 jQuery 拉進現代 bundle 已經說不過去了。
+
+| | slick | slickless |
+|---|---|---|
+| 依賴 | jQuery | 無 |
+| 型別宣告 | 社群提供 | 內建 |
+| 觸控 + 滑鼠 + 觸控筆 | 各自處理 | 統一 Pointer Events |
+| Resize 處理 | `window.resize` | `ResizeObserver` |
+| 減少動態尊重 | 手動 | 內建 |
+| ARIA 角色 | 部分 | 完整 carousel pattern |
+| Gzip 後（核心 + CSS） | ~11 kB + jQuery（~24–30 kB） | ~8 kB，零依賴 |
+
+大多數選項名稱完全沿用：`slidesToShow`、`infinite`、`fade`、`centerMode`、`asNavFor`、`customPaging`、`responsive`。DOM 採 BEM 命名（`.slickless__track`、`.slickless__slide` 等），初始化用 `new Slickless(el, options)`。所以遷移主要是改名工作，不是直接替換。
+
+## 安裝
+
+```bash
+bun add slickless
+# 或
+pnpm add slickless
+# 或
+npm install slickless
+```
+
+## 使用
+
+```js
+import { Slickless } from "slickless";
+import "slickless/style.css";
+
+const carousel = new Slickless("#my-carousel", {
+  slidesToShow: 3,
+  dots: true,
+  autoplay: true,
+});
+
+carousel.on("afterChange", ({ currentSlide }) => {
+  console.log("目前在", currentSlide);
+});
+```
+
+```html
+<div id="my-carousel">
+  <div>Slide 1</div>
+  <div>Slide 2</div>
+  <div>Slide 3</div>
+</div>
+```
+
+每個直接子元素都會成為一張 slide。`<img>` 上加 `data-lazy="…"` 可延後圖片載入。
+
+## 完整文件
+
+選項、API、事件、樣式技巧都在線上 demo：
+
+**[yfxie.github.io/slickless](https://yfxie.github.io/slickless/)**
+
+## 瀏覽器支援
+
+主流瀏覽器（Chrome、Edge、Firefox、Safari ≥ 14）。需要 Pointer Events、`ResizeObserver`、CSS Custom Properties。
+
+## 開發
+
+```bash
+bun install
+bun run dev          # demo 開發伺服器
+bun run test         # vitest 測試
+bun run build        # 函式庫建置 + d.ts
+bun run build:demo   # demo 建置 → demo-dist/
+```
+
+## 授權
+
+[MIT](./LICENSE)

package/dist/defaults.d.ts

@@ -0,0 +1,3 @@
+import type { SlicklessOptions } from "./types";
+export declare const DEFAULTS: SlicklessOptions;
+export declare function mergeOptions(base: SlicklessOptions, override: Partial<SlicklessOptions>): SlicklessOptions;

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import "./styles.css";
+export { Slickless } from "./slickless";
+export { DEFAULTS } from "./defaults";
+export type { SlicklessOptions, ResponsiveBreakpoint, SlicklessEvent, BeforeChangeDetail, AfterChangeDetail, SwipeDetail, EdgeDetail, BreakpointDetail, LazyLoadDetail, Direction, } from "./types";
+import { Slickless as _Slickless } from "./slickless";
+import type { SlicklessOptions } from "./types";
+/** Functional helper — creates a Slickless instance. */
+export declare function slickless(root: string | HTMLElement, options?: Partial<SlicklessOptions>): _Slickless;
+export default _Slickless;

package/dist/slickless.css

@@ -0,0 +1,2 @@
+.slickless{--slickless-arrow-size:44px;--slickless-arrow-color:#0f172a;--slickless-arrow-bg:#fff;--slickless-arrow-bg-hover:#f8fafc;--slickless-arrow-shadow:0 4px 16px -2px #0f172a29, 0 2px 4px -1px #0f172a14;--slickless-arrow-disabled-opacity:.3;--slickless-dot-size:8px;--slickless-dot-color:#0f172a40;--slickless-dot-color-active:#0f172a;--slickless-dot-gap:10px;--slickless-focus-ring:0 0 0 3px #6366f173;box-sizing:border-box;outline:none;min-width:0;position:relative}.slickless *,.slickless :before,.slickless :after{box-sizing:border-box}.slickless:not(.slickless--initialized)>:not(:first-child){display:none}.slickless:focus-visible{box-shadow:var(--slickless-focus-ring);border-radius:4px}.slickless__viewport{touch-action:pan-y;width:100%;min-width:0;position:relative;overflow:hidden}.slickless--vertical .slickless__viewport{touch-action:pan-x;height:100%;min-height:0}.slickless--fade .slickless__viewport{min-height:1px}.slickless__track{will-change:transform;width:100%;min-width:0;display:flex}.slickless--vertical .slickless__track{flex-direction:column;height:100%;min-height:0}.slickless--adaptive-height .slickless__track{align-items:flex-start}.slickless--fade .slickless__track{height:100%;display:block;position:relative}.slickless--dragging .slickless__track{cursor:grabbing}.slickless__slide{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;outline:none;flex:none;position:relative}.slickless__slide>*{width:100%;height:100%}.slickless--fade .slickless__slide{width:100%;position:absolute;top:0;left:0}.slickless__slide:focus-visible{box-shadow:var(--slickless-focus-ring);border-radius:4px}.slickless__arrow{z-index:5;width:var(--slickless-arrow-size);height:var(--slickless-arrow-size);background:var(--slickless-arrow-bg);color:var(--slickless-arrow-color);box-shadow:var(--slickless-arrow-shadow);cursor:pointer;border:0;border-radius:999px;justify-content:center;align-items:center;padding:0;transition:background-color .16s,transform .16s,opacity .16s;display:inline-flex;position:absolute;top:50%;transform:translateY(-50%)}.slickless__arrow:hover{background:var(--slickless-arrow-bg-hover)}.slickless__arrow:active{transform:translateY(-50%)scale(.94)}.slickless__arrow:focus-visible{box-shadow:var(--slickless-arrow-shadow), var(--slickless-focus-ring)}.slickless__arrow--prev{left:12px}.slickless__arrow--next{right:12px}.slickless--rtl .slickless__arrow--prev{left:auto;right:12px}.slickless--rtl .slickless__arrow--next{left:12px;right:auto}.slickless--vertical .slickless__arrow{top:auto;left:50%;transform:translate(-50%)rotate(90deg)}.slickless--vertical .slickless__arrow--prev{top:12px}.slickless--vertical .slickless__arrow--next{bottom:12px;right:auto}.slickless__arrow svg{width:22px;height:22px}.slickless__arrow--disabled{opacity:var(--slickless-arrow-disabled-opacity);cursor:not-allowed}.slickless__arrow--disabled:hover{background:var(--slickless-arrow-bg)}.slickless__dots{justify-content:center;align-items:center;gap:var(--slickless-dot-gap);margin:16px 0 0;padding:0;list-style:none;display:flex}.slickless__dots li{display:inline-flex}.slickless__dot{cursor:pointer}.slickless__dot:focus-visible{box-shadow:var(--slickless-focus-ring)}.slickless__dot--bullet{width:var(--slickless-dot-size);height:var(--slickless-dot-size);background:var(--slickless-dot-color);color:#0000;border:0;border-radius:999px;padding:0;font-size:0;transition:background-color .2s,width .2s}.slickless__dot--bullet:hover{background:var(--slickless-dot-color-active);opacity:.7}.slickless__dot--bullet.slickless__dot--active{background:var(--slickless-dot-color-active);width:calc(var(--slickless-dot-size) * 3);border-radius:999px}.slickless--center .slickless__slide{transition:opacity var(--slickless-transition-duration,.4s) ease, transform var(--slickless-transition-duration,.4s) ease;opacity:.55;transform:scale(.92)}.slickless--center .slickless__slide--center{opacity:1;transform:scale(1)}.slickless--snap .slickless__slide,.slickless--snap .slickless__track{transition:none!important}@media (prefers-reduced-motion:reduce){.slickless__track,.slickless__slide,.slickless__arrow,.slickless__dot{transition-duration:.01ms!important}}
+/*$vite$:1*/

package/dist/slickless.d.ts

@@ -0,0 +1,107 @@
+import type { SlicklessOptions } from "./types";
+export declare class Slickless {
+    readonly root: HTMLElement;
+    private userOptions;
+    options: SlicklessOptions;
+    private originalChildren;
+    private slides;
+    private track;
+    private viewport;
+    private prevArrow;
+    private nextArrow;
+    private dotsList;
+    private cloneCount;
+    private currentIndex;
+    /** Track index we are animating toward. Lets layout reads use the future
+     * slide for height-syncing while the transform is still in flight. */
+    private animatingTo;
+    private slideCount;
+    private animating;
+    /** Last observed root width — used to ignore height-only ResizeObserver
+     * fires (e.g. when adaptiveHeight changes the viewport height). */
+    private lastRootWidth;
+    private destroyed;
+    private currentBreakpoint;
+    private resizeObserver;
+    private autoplayTimer;
+    private autoplayPaused;
+    private listeners;
+    private pointer;
+    private pointerHandlers;
+    private linkedNav;
+    private linkedFromExternal;
+    constructor(root: string | HTMLElement, options?: Partial<SlicklessOptions>);
+    private init;
+    destroy(): void;
+    reInit(): void;
+    private captureChildren;
+    private applyResponsive;
+    private build;
+    private wrapAsSlide;
+    private cloneSlide;
+    private buildArrows;
+    private resolveArrow;
+    private buildDots;
+    private htmlToElement;
+    private viewportSize;
+    private slideSize;
+    /**
+     * Resolve `centerPadding` (e.g. "50px" or "10%") to a pixel value based on
+     * the current viewport size. Negative or unparseable values fall back to 0.
+     */
+    private parseCenterPadding;
+    private applyLayout;
+    private effectiveSpeed;
+    private indexToOffset;
+    private translateTo;
+    next(): void;
+    prev(): void;
+    goTo(index: number, immediate?: boolean): void;
+    play(): void;
+    pause(): void;
+    private scheduleAutoplay;
+    on<T = unknown>(event: string, handler: (detail: T) => void): () => void;
+    off(event: string, handler: (detail: unknown) => void): void;
+    private emit;
+    private handlePrevClick;
+    private handleNextClick;
+    private handleResize;
+    private handleKey;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private handleFocusIn;
+    private handleFocusOut;
+    private bindEvents;
+    private unbindEvents;
+    private bindPointerEvents;
+    private unbindPointerEvents;
+    private parseTranslate;
+    private bindFocusOnSelect;
+    private realToTrackIndex;
+    private updateAria;
+    private suppressSlideTransitionsForOneFrame;
+    private updateCenterMode;
+    private isSlideInActiveRange;
+    private updateArrows;
+    private pageCount;
+    private updateDots;
+    private updateAdaptiveHeight;
+    private applyLazyLoad;
+    private loadImagesIn;
+    private activateLazyImage;
+    private linkAsNavFor;
+    private notifyLinked;
+    getCurrentSlide(): number;
+    getSlideCount(): number;
+    getSlides(): HTMLElement[];
+    setOptions(options: Partial<SlicklessOptions>, refresh?: boolean): void;
+    /**
+     * Recompute slide widths and re-position the track using the currently
+     * stored options. Cheaper than `reInit` — no DOM teardown, no rebuild — and
+     * suitable for live tweaks like dragging a slider that updates layout-only
+     * options (e.g. `centerPadding`, `slidesToScroll`, `cssEase`).
+     */
+    refresh(): void;
+    addSlide(element: HTMLElement, index?: number): void;
+    removeSlide(index: number): void;
+}