shopify-drag-carousel 1.0.2 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +71 -61
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -18,52 +18,84 @@ A tiny, zero-dependency behavior layer for smooth mouse and touch drag scrolling
18
18
  npm install shopify-drag-carousel
19
19
  ```
20
20
 
21
- ## Example (developer reference)
22
-
23
- The package ships two demos that load sample products from [`GET https://api.escuelajs.co/api/v1/products`](https://api.escuelajs.co/docs) and show **manual** + **auto-init** carousels. Card layout/CSS is demo-only; the library only adds scroll behavior.
21
+ ```js
22
+ const DragCarousel = require("shopify-drag-carousel");
23
+ ```
24
24
 
25
- ### View on CDN (no clone, no install)
25
+ ---
26
26
 
27
- After the package is **published to npm**, open this URL in a browser:
27
+ ## Quick start (browser)
28
28
 
29
- **https://unpkg.com/shopify-drag-carousel@1/examples/demo-cdn.html**
29
+ 1. Add a horizontal row of children (your own layout: flex, grid, etc.).
30
+ 2. Put the library on the page, then add class **`drag-carousel`** to the scroll container.
30
31
 
31
- That page loads `index.js` and `style.css` from **unpkg** (`shopify-drag-carousel@1`). Pin a version (e.g. `@1.0.0`) if you need a fixed release.
32
+ ```html
33
+ <link
34
+ rel="stylesheet"
35
+ href="https://cdn.jsdelivr.net/npm/shopify-drag-carousel@1/style.css"
36
+ />
37
+ <div class="drag-carousel">
38
+ <div>Slide A</div>
39
+ <div>Slide B</div>
40
+ <div>Slide C</div>
41
+ </div>
42
+ <script src="https://cdn.jsdelivr.net/npm/shopify-drag-carousel@1/index.js"></script>
43
+ ```
32
44
 
33
- ### Run locally (repo or `npm install`)
45
+ After load, `window.DragCarousel` is available. Auto-init runs on `DOMContentLoaded` for every `.drag-carousel`.
34
46
 
35
- Serve the package root over **http** (not `file://`), then open **`examples/demo.html`** (relative paths to the library).
47
+ **Manual init** (e.g. custom speed or arrows):
36
48
 
37
- ```bash
38
- npm run demo
49
+ ```html
50
+ <div id="strip"></div>
51
+ <button type="button" id="prev" aria-label="Previous">←</button>
52
+ <button type="button" id="next" aria-label="Next">→</button>
53
+ <script src="https://cdn.jsdelivr.net/npm/shopify-drag-carousel@1/index.js"></script>
54
+ <script>
55
+ new DragCarousel("#strip", {
56
+ speed: 1.5,
57
+ buttons: { prev: "#prev", next: "#next" },
58
+ });
59
+ </script>
39
60
  ```
40
61
 
41
- → **http://localhost:5173/examples/demo.html** (root **`demo.html`** redirects there.)
62
+ Do **not** put `class="drag-carousel"` on the same node if you also call `new DragCarousel` on it with options (avoid double init).
42
63
 
43
- Or: `npm install shopify-drag-carousel`, then `npx serve node_modules/shopify-drag-carousel` and open **`/examples/demo.html`**.
64
+ ---
44
65
 
45
- ## CDN (no build step)
66
+ ## CDN URLs
46
67
 
47
- Script (global `DragCarousel` on `window`):
68
+ Use a **major** tag (`@1`) or pin an exact version (`@1.0.0`) in production.
48
69
 
49
- ```html
50
- <script src="https://cdn.jsdelivr.net/npm/shopify-drag-carousel@1/index.js"></script>
51
- ```
70
+ | Asset | jsDelivr | unpkg |
71
+ | ----- | -------- | ----- |
72
+ | Script | [cdn.jsdelivr.net/npm/shopify-drag-carousel@1/index.js](https://cdn.jsdelivr.net/npm/shopify-drag-carousel@1/index.js) | [unpkg.com/shopify-drag-carousel@1/index.js](https://unpkg.com/shopify-drag-carousel@1/index.js) |
73
+ | Styles (optional) | [cdn.jsdelivr.net/npm/shopify-drag-carousel@1/style.css](https://cdn.jsdelivr.net/npm/shopify-drag-carousel@1/style.css) | [unpkg.com/shopify-drag-carousel@1/style.css](https://unpkg.com/shopify-drag-carousel@1/style.css) |
52
74
 
53
- Optional CSS for the dragging cursor:
75
+ ---
54
76
 
55
- ```html
56
- <link
57
- rel="stylesheet"
58
- href="https://cdn.jsdelivr.net/npm/shopify-drag-carousel@1/style.css"
59
- />
77
+ ## Live example (bundled demo)
78
+
79
+ The package includes HTML examples under **`examples/`**:
80
+
81
+ | Demo | What it is |
82
+ | ---- | ----------- |
83
+ | **[examples/demo-cdn.html](https://unpkg.com/shopify-drag-carousel@1/examples/demo-cdn.html)** | Full page on **unpkg** — loads the library from the CDN, fetches sample products from [api.escuelajs.co](https://api.escuelajs.co/docs), drag + prev/next. Requires the version to exist on [npm](https://www.npmjs.com/package/shopify-drag-carousel). |
84
+ | **`examples/demo.html`** | Same UI with **relative** script paths — run a static server from the repo root (see below). |
85
+
86
+ **Run the local demo** (clone or `npm install shopify-drag-carousel`, then serve the **package root** over `http://`, not `file://`):
87
+
88
+ ```bash
89
+ npm run demo
60
90
  ```
61
91
 
62
- Pin a major version (`@1`) or an exact version in production.
92
+ Open [http://localhost:5173/examples/demo.html](http://localhost:5173/examples/demo.html) — or [http://localhost:5173/demo.html](http://localhost:5173/demo.html), which redirects to the example folder.
93
+
94
+ ---
63
95
 
64
96
  ## Shopify (Liquid)
65
97
 
66
- Drop the script (and optional stylesheet) in your theme—**theme.liquid** asset tags, or a section’s `{% schema %}` and `{% javascript %}` / `{% stylesheet %}` as you prefer.
98
+ Load the script and optional CSS in your theme (e.g. `theme.liquid` or section assets).
67
99
 
68
100
  ```liquid
69
101
  <div class="drag-carousel">
@@ -73,61 +105,39 @@ Drop the script (and optional stylesheet) in your theme—**theme.liquid** asset
73
105
  </div>
74
106
  ```
75
107
 
76
- Give children whatever layout you use (flex row, grid, inline blocks, etc.). The library only enables horizontal scrolling and drag behavior.
77
-
78
- After **dynamic** updates (e.g. section AJAX), call:
108
+ Style the row/cards yourself (flex, grid, etc.). After **dynamic** HTML (e.g. section AJAX), call:
79
109
 
80
110
  ```js
81
111
  DragCarousel.initAll();
82
112
  ```
83
113
 
84
- ## Vanilla JavaScript
85
-
86
- **Automatic:** Add class `drag-carousel` to your container; initialization runs when the DOM is ready.
87
-
88
- **Manual:**
89
-
90
- ```js
91
- const carousel = new DragCarousel('#my-row', {
92
- speed: 1.5,
93
- buttons: {
94
- prev: '.prev-btn',
95
- next: '.next-btn',
96
- },
97
- });
98
- ```
99
-
100
- **Node / CommonJS:**
101
-
102
- ```js
103
- const DragCarousel = require('shopify-drag-carousel');
104
- new DragCarousel('.drag-carousel');
105
- ```
114
+ ---
106
115
 
107
116
  ## API
108
117
 
109
118
  ### `new DragCarousel(selectorOrElement, options?)`
110
119
 
111
- | Option | Type | Default | Description |
112
- | --------- | -------- | ------- | ------------------------------------------------ |
113
- | `speed` | `number` | `1.5` | Multiplier applied to pointer movement vs scroll |
114
- | `buttons` | `object` | `null` | `{ prev: string, next: string }` CSS selectors |
120
+ | Option | Type | Default | Description |
121
+ | ------ | ---- | ------- | ----------- |
122
+ | `speed` | `number` | `1.5` | Multiplier for pointer movement vs. scroll |
123
+ | `buttons` | `object` | `null` | `{ prev: string, next: string }` — any valid `querySelector` string |
115
124
 
116
- String selectors use `document.querySelector` (first match). For multiple carousels, create one instance per element or rely on **auto-init** + class `drag-carousel`.
125
+ Selectors resolve with `document.querySelector` (first match).
117
126
 
118
127
  ### `DragCarousel.initAll()`
119
128
 
120
- Finds all `.drag-carousel` elements that are not yet initialized and attaches behavior. Use after injecting new HTML.
129
+ Initializes every `.drag-carousel` in the document that is not already initialized. Use after injecting new markup.
121
130
 
122
131
  ### `DragCarousel.isInitialized(element)`
123
132
 
124
- Returns whether the given element already has carousel behavior.
133
+ Returns whether the element already has carousel behavior.
134
+
135
+ ---
125
136
 
126
137
  ## Constraints
127
138
 
128
- - No React or other UI framework required
129
- - No bundler required for browser usage
130
- - Intended to run directly in the browser via script tag or small bundles
139
+ - No React required; no bundler required for browser usage
140
+ - Intended for direct use via `<script>` or small bundles
131
141
 
132
142
  ## License
133
143
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "shopify-drag-carousel",
3
- "version": "1.0.2",
3
+ "version": "1.0.4",
4
4
  "description": "Lightweight drag-scroll for horizontal containers—one class, zero dependencies. Shopify & vanilla JS friendly.",
5
5
  "main": "index.js",
6
6
  "files": [