lazer-slider 1.1.5 → 1.1.7

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 (9) hide show
  1. package/README.md +132 -153
  2. package/dist/index.cjs +2 -1195
  3. package/dist/index.d.cts +1 -33
  4. package/dist/index.d.ts +1 -33
  5. package/dist/index.js +2 -1159
  6. package/dist/lazer-slider.css +282 -243
  7. package/package.json +2 -3
  8. package/dist/index.cjs.map +0 -1
  9. package/dist/index.js.map +0 -1
package/dist/lazer-slider.css CHANGED
@@ -14,246 +14,285 @@
14
14
  /* ============================================
15
15
  CSS Custom Properties (Easy to Override)
16
16
  ============================================ */
17
- :root {
18
- /* Bullets / Dots */
19
- --lazer-bullet-size: 12px;
20
- --lazer-bullet-gap: 8px;
21
- --lazer-bullet-color: #cbd5e1;
22
- --lazer-bullet-active-color: #1e293b;
23
- --lazer-bullet-hover-scale: 1.2;
24
-
25
- /* Thumbnails */
26
- --lazer-thumb-gap: 8px;
27
- --lazer-thumb-opacity: 0.6;
28
- --lazer-thumb-hover-opacity: 0.8;
29
- --lazer-thumb-active-opacity: 1;
30
- --lazer-thumb-border-width: 2px;
31
- --lazer-thumb-border-color: transparent;
32
- --lazer-thumb-active-border-color: #3b82f6;
33
- --lazer-thumb-border-radius: 4px;
34
-
35
- /* Scrollbar */
36
- --lazer-track-height: 4px;
37
- --lazer-track-color: #e2e8f0;
38
- --lazer-thumb-color: #1e293b;
39
- --lazer-track-radius: 2px;
40
-
41
- /* Navigation Buttons */
42
- --lazer-nav-size: 40px;
43
- --lazer-nav-offset: 12px;
44
- --lazer-nav-bg: rgba(255, 255, 255, 0.9);
45
- --lazer-nav-hover-bg: white;
46
- --lazer-nav-radius: 50%;
47
- --lazer-nav-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
48
-
49
- /* Transitions */
50
- --lazer-duration: 0.3s;
51
- --lazer-easing: ease;
52
- }
53
-
54
- /* ============================================
55
- Feed (Scrollable Container)
56
- ============================================ */
57
- .lazer-feed {
58
- position: relative;
59
- display: flex;
60
- overflow-x: auto;
61
- overflow-y: hidden;
62
- -webkit-overflow-scrolling: touch;
63
- scrollbar-width: none;
64
- }
65
-
66
- .lazer-feed::-webkit-scrollbar {
67
- display: none;
68
- }
69
-
70
- /* Vertical slider variant */
71
- .lazer-feed.lazer-vertical {
72
- flex-direction: column;
73
- overflow-x: hidden;
74
- overflow-y: auto;
75
- }
76
-
77
- /* ============================================
78
- Slides
79
- ============================================ */
80
- .lazer-slide {
81
- flex-shrink: 0;
82
- }
83
-
84
- /* ============================================
85
- Drag State
86
- ============================================ */
87
- .lazer-feed.lazer-draggable {
88
- cursor: grab;
89
- }
90
-
91
- .lazer-feed.lazer-draggable.is-dragging {
92
- cursor: grabbing;
93
- user-select: none;
94
- }
95
-
96
- /* ============================================
97
- Bullets / Dots Navigation
98
- ============================================ */
99
- .lazer-bullets {
100
- display: flex;
101
- gap: var(--lazer-bullet-gap);
102
- justify-content: center;
103
- align-items: center;
104
- padding: 16px 0;
105
- }
106
-
107
- .lazer-bullet {
108
- width: var(--lazer-bullet-size);
109
- height: var(--lazer-bullet-size);
110
- padding: 0;
111
- border: none;
112
- border-radius: 50%;
113
- background: var(--lazer-bullet-color);
114
- cursor: pointer;
115
- transition:
116
- background var(--lazer-duration) var(--lazer-easing),
117
- transform var(--lazer-duration) var(--lazer-easing);
118
- }
119
-
120
- .lazer-bullet:hover {
121
- transform: scale(var(--lazer-bullet-hover-scale));
122
- }
123
-
124
- .lazer-bullet:focus-visible {
125
- outline: 2px solid var(--lazer-bullet-active-color);
126
- outline-offset: 2px;
127
- }
128
-
129
- .lazer-bullet.active {
130
- background: var(--lazer-bullet-active-color);
131
- }
132
-
133
- /* ============================================
134
- Thumbnails Gallery
135
- ============================================ */
136
- .lazer-thumbs {
137
- display: flex;
138
- gap: var(--lazer-thumb-gap);
139
- justify-content: center;
140
- align-items: center;
141
- padding: 16px 0;
142
- flex-wrap: wrap;
143
- }
144
-
145
- .lazer-thumb {
146
- padding: 0;
147
- border: var(--lazer-thumb-border-width) solid var(--lazer-thumb-border-color);
148
- border-radius: var(--lazer-thumb-border-radius);
149
- background: none;
150
- cursor: pointer;
151
- opacity: var(--lazer-thumb-opacity);
152
- transition:
153
- opacity var(--lazer-duration) var(--lazer-easing),
154
- border-color var(--lazer-duration) var(--lazer-easing);
155
- }
156
-
157
- .lazer-thumb:hover {
158
- opacity: var(--lazer-thumb-hover-opacity);
159
- }
160
-
161
- .lazer-thumb:focus-visible {
162
- outline: 2px solid var(--lazer-thumb-active-border-color);
163
- outline-offset: 2px;
164
- }
165
-
166
- .lazer-thumb.active {
167
- opacity: var(--lazer-thumb-active-opacity);
168
- border-color: var(--lazer-thumb-active-border-color);
169
- }
170
-
171
- .lazer-thumb img {
172
- display: block;
173
- border-radius: calc(var(--lazer-thumb-border-radius) - 2px);
174
- }
175
-
176
- /* ============================================
177
- Custom Scrollbar
178
- ============================================ */
179
- .lazer-track {
180
- width: 100%;
181
- height: var(--lazer-track-height);
182
- background: var(--lazer-track-color);
183
- border-radius: var(--lazer-track-radius);
184
- margin-top: 16px;
185
- position: relative;
186
- overflow: hidden;
187
- }
188
-
189
- .lazer-scrollbar {
190
- height: 100%;
191
- background: var(--lazer-thumb-color);
192
- border-radius: var(--lazer-track-radius);
193
- transition: transform 0.1s linear;
194
- }
195
-
196
- /* ============================================
197
- Navigation Buttons
198
- ============================================ */
199
- .lazer-nav {
200
- position: absolute;
201
- top: 50%;
202
- transform: translateY(-50%);
203
- z-index: 10;
204
- display: flex;
205
- align-items: center;
206
- justify-content: center;
207
- width: var(--lazer-nav-size);
208
- height: var(--lazer-nav-size);
209
- border: none;
210
- border-radius: var(--lazer-nav-radius);
211
- background: var(--lazer-nav-bg);
212
- box-shadow: var(--lazer-nav-shadow);
213
- cursor: pointer;
214
- transition:
215
- opacity var(--lazer-duration) var(--lazer-easing),
216
- background var(--lazer-duration) var(--lazer-easing);
217
- }
218
-
219
- .lazer-nav:hover {
220
- background: var(--lazer-nav-hover-bg);
221
- }
222
-
223
- .lazer-nav:focus-visible {
224
- outline: 2px solid var(--lazer-bullet-active-color);
225
- outline-offset: 2px;
226
- }
227
-
228
- .lazer-nav[aria-hidden="true"] {
229
- opacity: 0;
230
- pointer-events: none;
231
- }
232
-
233
- .lazer-prev {
234
- left: var(--lazer-nav-offset);
235
- }
236
-
237
- .lazer-next {
238
- right: var(--lazer-nav-offset);
239
- }
240
-
241
- /* ============================================
242
- Slider Container (Optional wrapper)
243
- ============================================ */
244
- .lazer-slider {
245
- position: relative;
246
- width: 100%;
247
- }
248
-
249
- /* ============================================
250
- Marquee Specific
251
- ============================================ */
252
- .lazer-feed.lazer-marquee {
253
- scroll-snap-type: none;
254
- cursor: default;
255
- }
256
-
257
- .lazer-feed.lazer-marquee:not(.is-dragging) {
258
- cursor: default;
259
- }
17
+ :root {
18
+ /* Bullets / Dots */
19
+ --lazer-bullet-size: 12px;
20
+ --lazer-bullet-gap: 8px;
21
+ --lazer-bullet-color: #cbd5e1;
22
+ --lazer-bullet-active-color: #1e293b;
23
+ --lazer-bullet-hover-scale: 1.2;
24
+
25
+ /* Thumbnails */
26
+ --lazer-thumb-gap: 8px;
27
+ --lazer-thumb-opacity: 0.6;
28
+ --lazer-thumb-hover-opacity: 0.8;
29
+ --lazer-thumb-active-opacity: 1;
30
+ --lazer-thumb-border-width: 2px;
31
+ --lazer-thumb-border-color: transparent;
32
+ --lazer-thumb-active-border-color: #3b82f6;
33
+ --lazer-thumb-border-radius: 4px;
34
+
35
+ /* Scrollbar */
36
+ --lazer-track-height: 4px;
37
+ --lazer-track-color: #e2e8f0;
38
+ --lazer-thumb-color: #1e293b;
39
+ --lazer-track-radius: 2px;
40
+
41
+ /* Navigation Buttons */
42
+ --lazer-nav-size: 40px;
43
+ --lazer-nav-offset: 12px;
44
+ --lazer-nav-bg: rgba(255, 255, 255, 0.9);
45
+ --lazer-nav-hover-bg: white;
46
+ --lazer-nav-radius: 50%;
47
+ --lazer-nav-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
48
+
49
+ /* Transitions */
50
+ --lazer-duration: 0.3s;
51
+ --lazer-easing: ease;
52
+ }
53
+
54
+ /* ============================================
55
+ Feed (Scrollable Container)
56
+ ============================================ */
57
+ .lazer-feed {
58
+ position: relative;
59
+ display: flex;
60
+ overflow-x: auto;
61
+ overflow-y: hidden;
62
+ -webkit-overflow-scrolling: touch;
63
+ scrollbar-width: none;
64
+ }
65
+
66
+ .lazer-feed::-webkit-scrollbar {
67
+ display: none;
68
+ }
69
+
70
+ /* Vertical slider variant */
71
+ .lazer-feed.lazer-vertical {
72
+ flex-direction: column;
73
+ overflow-x: hidden;
74
+ overflow-y: auto;
75
+ }
76
+
77
+ /* ============================================
78
+ Slides
79
+ ============================================ */
80
+ .lazer-slide {
81
+ flex: 0 0 calc(100% / var(--slides-per-view, 1));
82
+ scroll-snap-align: start;
83
+ scroll-snap-stop: always;
84
+ }
85
+
86
+ /* ============================================
87
+ Drag State
88
+ ============================================ */
89
+ .lazer-feed.lazer-draggable {
90
+ cursor: grab;
91
+ /* Hint for GPU acceleration during drag */
92
+ will-change: scroll-position;
93
+ }
94
+
95
+ .lazer-feed.lazer-draggable.is-dragging {
96
+ cursor: grabbing;
97
+ user-select: none;
98
+ /* Disable scroll snapping during drag for smoother experience */
99
+ scroll-snap-type: none;
100
+ }
101
+
102
+ .lazer-feed.lazer-draggable.is-dragging .lazer-slide {
103
+ scroll-snap-align: none;
104
+ }
105
+
106
+ /* Restore scroll snapping after drag ends */
107
+ .lazer-feed.lazer-draggable:not(.is-dragging) {
108
+ scroll-behavior: smooth;
109
+ }
110
+
111
+ /* ============================================
112
+ Bullets / Dots Navigation
113
+ ============================================ */
114
+ .lazer-bullets {
115
+ display: flex;
116
+ gap: var(--lazer-bullet-gap);
117
+ justify-content: center;
118
+ align-items: center;
119
+ padding: 16px 0;
120
+ }
121
+
122
+ .lazer-bullet {
123
+ width: var(--lazer-bullet-size);
124
+ height: var(--lazer-bullet-size);
125
+ padding: 0;
126
+ border: none;
127
+ border-radius: 50%;
128
+ background: var(--lazer-bullet-color);
129
+ cursor: pointer;
130
+ transition:
131
+ background var(--lazer-duration) var(--lazer-easing),
132
+ transform var(--lazer-duration) var(--lazer-easing);
133
+ }
134
+
135
+ .lazer-bullet:hover {
136
+ transform: scale(var(--lazer-bullet-hover-scale));
137
+ }
138
+
139
+ .lazer-bullet:focus-visible {
140
+ outline: 2px solid var(--lazer-bullet-active-color);
141
+ outline-offset: 2px;
142
+ }
143
+
144
+ .lazer-bullet.active {
145
+ background: var(--lazer-bullet-active-color);
146
+ }
147
+
148
+ /* ============================================
149
+ Thumbnails Gallery
150
+ ============================================ */
151
+ .lazer-thumbs {
152
+ display: flex;
153
+ gap: var(--lazer-thumb-gap);
154
+ justify-content: center;
155
+ align-items: center;
156
+ padding: 16px 0;
157
+ flex-wrap: wrap;
158
+ }
159
+
160
+ .lazer-thumb {
161
+ padding: 0;
162
+ border: var(--lazer-thumb-border-width) solid var(--lazer-thumb-border-color);
163
+ border-radius: var(--lazer-thumb-border-radius);
164
+ background: none;
165
+ cursor: pointer;
166
+ opacity: var(--lazer-thumb-opacity);
167
+ transition:
168
+ opacity var(--lazer-duration) var(--lazer-easing),
169
+ border-color var(--lazer-duration) var(--lazer-easing);
170
+ }
171
+
172
+ .lazer-thumb:hover {
173
+ opacity: var(--lazer-thumb-hover-opacity);
174
+ }
175
+
176
+ .lazer-thumb:focus-visible {
177
+ outline: 2px solid var(--lazer-thumb-active-border-color);
178
+ outline-offset: 2px;
179
+ }
180
+
181
+ .lazer-thumb.active {
182
+ opacity: var(--lazer-thumb-active-opacity);
183
+ border-color: var(--lazer-thumb-active-border-color);
184
+ }
185
+
186
+ .lazer-thumb img {
187
+ display: block;
188
+ border-radius: calc(var(--lazer-thumb-border-radius) - 2px);
189
+ }
190
+
191
+ /* ============================================
192
+ Custom Scrollbar
193
+ ============================================ */
194
+ .lazer-track {
195
+ position: relative;
196
+ width: 100%;
197
+ height: var(--lazer-track-height);
198
+ background-color: var(--lazer-track-color);
199
+ border-radius: var(--lazer-track-radius);
200
+ overflow: hidden;
201
+ margin-top: 16px;
202
+ }
203
+
204
+ .lazer-scrollbar {
205
+ position: absolute;
206
+ top: 0;
207
+ left: 0;
208
+ height: 100%;
209
+ width: 100%;
210
+ transition: transform 0.1s linear;
211
+ }
212
+
213
+ /* Scrollbar thumb indicator - override thumbnail styles */
214
+ .lazer-track .lazer-thumb,
215
+ .lazer-scrollbar .lazer-thumb {
216
+ position: absolute;
217
+ top: 0;
218
+ left: 0;
219
+ height: 100%;
220
+ min-width: 32px;
221
+ background-color: var(--lazer-thumb-color);
222
+ border-radius: var(--lazer-track-radius);
223
+ border: none;
224
+ opacity: 1;
225
+ cursor: grab;
226
+ transition: width 0.2s ease;
227
+ pointer-events: auto;
228
+ }
229
+
230
+ .lazer-track .lazer-thumb:active,
231
+ .lazer-scrollbar .lazer-thumb:active {
232
+ cursor: grabbing;
233
+ }
234
+
235
+ /* ============================================
236
+ Navigation Buttons
237
+ ============================================ */
238
+ .lazer-nav {
239
+ position: absolute;
240
+ top: 50%;
241
+ transform: translateY(-50%);
242
+ z-index: 10;
243
+ display: flex;
244
+ align-items: center;
245
+ justify-content: center;
246
+ width: var(--lazer-nav-size);
247
+ height: var(--lazer-nav-size);
248
+ border: none;
249
+ border-radius: var(--lazer-nav-radius);
250
+ background: var(--lazer-nav-bg);
251
+ box-shadow: var(--lazer-nav-shadow);
252
+ cursor: pointer;
253
+ transition:
254
+ opacity var(--lazer-duration) var(--lazer-easing),
255
+ background var(--lazer-duration) var(--lazer-easing);
256
+ }
257
+
258
+ .lazer-nav:hover {
259
+ background: var(--lazer-nav-hover-bg);
260
+ }
261
+
262
+ .lazer-nav:focus-visible {
263
+ outline: 2px solid var(--lazer-bullet-active-color);
264
+ outline-offset: 2px;
265
+ }
266
+
267
+ .lazer-nav[aria-hidden="true"] {
268
+ opacity: 0;
269
+ pointer-events: none;
270
+ }
271
+
272
+ .lazer-prev {
273
+ left: var(--lazer-nav-offset);
274
+ }
275
+
276
+ .lazer-next {
277
+ right: var(--lazer-nav-offset);
278
+ }
279
+
280
+ /* ============================================
281
+ Slider Container (Optional wrapper)
282
+ ============================================ */
283
+ .lazer-slider {
284
+ position: relative;
285
+ width: 100%;
286
+ }
287
+
288
+ /* ============================================
289
+ Marquee Specific
290
+ ============================================ */
291
+ .lazer-feed.lazer-marquee {
292
+ scroll-snap-type: none;
293
+ cursor: default;
294
+ }
295
+
296
+ .lazer-feed.lazer-marquee:not(.is-dragging) {
297
+ cursor: default;
298
+ }
package/package.json CHANGED
@@ -1,12 +1,11 @@
1
1
  {
2
2
  "name": "lazer-slider",
3
- "version": "1.1.5",
3
+ "version": "1.1.7",
4
4
  "description": "A lightweight, accessible slider with smooth scroll-to-snap animations and drag-to-scroll support",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
7
7
  "module": "./dist/index.js",
8
8
  "types": "./dist/index.d.ts",
9
- "style": "./dist/lazer-slider.css",
10
9
  "exports": {
11
10
  ".": {
12
11
  "types": "./dist/index.d.ts",
@@ -20,7 +19,7 @@
20
19
  "dist"
21
20
  ],
22
21
  "scripts": {
23
- "build": "tsup",
22
+ "build": "tsup && cp src/styles/lazer-slider.css dist/",
24
23
  "prepare": "npm run build"
25
24
  },
26
25
  "keywords": [