lazer-slider 1.1.4 → 1.1.6

package/README.md

@@ -14,7 +14,8 @@ A lightweight, accessible slider with smooth scroll-to-snap animations, drag-to-
 - **Automatic Bullets** - Auto-generate navigation bullets from slides
 - **Thumbs Gallery** - Auto-generate thumbnail navigation from slide images
 - **Accessible** - Full ARIA support, keyboard navigation (arrow keys)
-- **Lightweight** - Zero dependencies, ~20KB unminified
+- **Optional CSS** - Ready-to-use styles with CSS custom properties for easy theming
+- **Lightweight** - Zero dependencies, ~17KB minified
 - **TypeScript** - Full type definitions included
 
 ## Installation
@@ -29,8 +30,8 @@ npm install lazer-slider
 
 ```html
 <div class="lazer-slider">
-  <button class="lazer-prev">Previous</button>
-  <button class="lazer-next">Next</button>
+  <button class="lazer-nav lazer-prev">‹</button>
+  <button class="lazer-nav lazer-next">›</button>
 
   <div class="lazer-feed">
     <div class="lazer-slide">Slide 1</div>
@@ -44,52 +45,25 @@ npm install lazer-slider
 
 ### CSS
 
-**Zero-Config (Recommended):** Critical CSS is auto-injected when you call `createSlider()`. The slider automatically adds `.lazer-feed` and `.lazer-slide` classes to your elements!
+Import the optional stylesheet for ready-to-use styles:
 
-```html
-<div class="lazer-slider">
-  <button class="lazer-prev">Previous</button>
-  <button class="lazer-next">Next</button>
-
-  <div class="lazer-feed">
-    <div class="lazer-slide">Slide 1</div>
-    <div class="lazer-slide">Slide 2</div>
-    <div class="lazer-slide">Slide 3</div>
-  </div>
-
-  <div class="lazer-bullets"></div>
-</div>
-```
-
-**Optional Styles:** For bullets, thumbs, scrollbar, and navigation styling, import the optional CSS file:
-
-```typescript
-// Import optional styles for bullets, thumbs, scrollbar, etc.
+```js
 import 'lazer-slider/css'
 ```
 
 Or in HTML:
+
 ```html
 <link rel="stylesheet" href="node_modules/lazer-slider/dist/lazer-slider.css">
 ```
 
-**Custom CSS:** You can override the auto-injected styles easily:
-
-```css
-/* Override the auto-injected styles */
-.lazer-feed {
-  gap: 20px;
-}
-
-.lazer-slide {
-  scroll-snap-align: center; /* Change snap alignment */
-}
-```
+> **Note:** The CSS is optional. You can write your own styles or customize the included ones using CSS custom properties. See [Styling](#styling) for details.
 
 ### JavaScript
 
 ```typescript
 import { createSlider } from 'lazer-slider'
+import 'lazer-slider/css'
 
 const slider = createSlider({
   feed: document.querySelector('.lazer-feed'),
@@ -97,6 +71,7 @@ const slider = createSlider({
   prevSlideButton: document.querySelector('.lazer-prev'),
   nextSlideButton: document.querySelector('.lazer-next'),
   bulletsContainer: document.querySelector('.lazer-bullets'),
+  bulletsClass: 'lazer-bullet',
   enableDragToScroll: true
 })
 
@@ -121,10 +96,10 @@ slider.unload()
 | `nextSlideButton` | `HTMLElement \| null` | `null` | Next slide button |
 | `thumbs` | `HTMLElement[]` | `undefined` | Thumbnail/dot elements for direct navigation (manual) |
 | `bulletsContainer` | `HTMLElement \| null` | `null` | Container element for auto-generated bullets |
-| `bulletsClass` | `string` | `'lazer-bullet'` | CSS class for bullet elements |
+| `bulletsClass` | `string` | `'slider-bullet'` | CSS class for bullet elements |
 | `bulletsActiveClass` | `string` | `'active'` | CSS class for active bullet element |
 | `thumbsContainer` | `HTMLElement \| null` | `null` | Container element for auto-generated thumbnails |
-| `thumbsClass` | `string` | `'lazer-thumb'` | CSS class for thumbnail elements |
+| `thumbsClass` | `string` | `'slider-thumb'` | CSS class for thumbnail elements |
 | `thumbsActiveClass` | `string` | `'active'` | CSS class for active thumbnail element |
 | `thumbImageSelector` | `string` | `'img'` | CSS selector to find image inside each slide |
 | `thumbSize` | `{ width: number; height: number }` | `undefined` | Fixed dimensions for thumbnail images |
@@ -255,7 +230,7 @@ const slider = createSlider({
 
 ```typescript
 const slider = createSlider({
-  feed: document.querySelector('.lazer-feed'),
+  feed: document.querySelector('.slider-feed'),
   slides: [...document.querySelectorAll('.slide')]
 })
 ```
@@ -264,10 +239,10 @@ const slider = createSlider({
 
 ```typescript
 const slider = createSlider({
-  feed: document.querySelector('.lazer-feed'),
+  feed: document.querySelector('.slider-feed'),
   slides: [...document.querySelectorAll('.slide')],
   prevSlideButton: document.querySelector('.prev'),
-  nextSlideButton: document.querySelector('.lazer-next')
+  nextSlideButton: document.querySelector('.next')
 })
 ```
 
@@ -275,7 +250,7 @@ const slider = createSlider({
 
 ```typescript
 const slider = createSlider({
-  feed: document.querySelector('.lazer-feed'),
+  feed: document.querySelector('.slider-feed'),
   slides: [...document.querySelectorAll('.slide')],
   mobileSlidesPerView: 1,
   desktopSlidesPerView: 3,
@@ -289,7 +264,7 @@ const slider = createSlider({
 
 ```typescript
 const slider = createSlider({
-  feed: document.querySelector('.lazer-feed'),
+  feed: document.querySelector('.slider-feed'),
   slides: [...document.querySelectorAll('.slide')],
   loop: true,
   autoplay: true,
@@ -334,19 +309,19 @@ Create a vertical scrolling slider for content that flows top-to-bottom.
 
 ```html
 <div class="vertical-slider">
-  <button class="lazer-prev">↑</button>
-  <button class="lazer-next">↓</button>
+  <button class="slider-prev">↑</button>
+  <button class="slider-next">↓</button>
 
   <div class="slider-feed">
-    <div class="lazer-slide">Slide 1</div>
-    <div class="lazer-slide">Slide 2</div>
-    <div class="lazer-slide">Slide 3</div>
+    <div class="slide">Slide 1</div>
+    <div class="slide">Slide 2</div>
+    <div class="slide">Slide 3</div>
   </div>
 </div>
 ```
 
 ```css
-.lazer-feed {
+.slider-feed {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
@@ -354,7 +329,7 @@ Create a vertical scrolling slider for content that flows top-to-bottom.
   scrollbar-width: none;
 }
 
-.lazer-feed::-webkit-scrollbar {
+.slider-feed::-webkit-scrollbar {
   display: none;
 }
 
@@ -366,10 +341,10 @@ Create a vertical scrolling slider for content that flows top-to-bottom.
 
 ```typescript
 const verticalSlider = createSlider({
-  feed: document.querySelector('.lazer-feed'),
+  feed: document.querySelector('.slider-feed'),
   slides: [...document.querySelectorAll('.slide')],
-  prevSlideButton: document.querySelector('.lazer-prev'),
-  nextSlideButton: document.querySelector('.lazer-next'),
+  prevSlideButton: document.querySelector('.slider-prev'),
+  nextSlideButton: document.querySelector('.slider-next'),
   direction: 'vertical',
   mobileSlidesPerView: 1,
   desktopSlidesPerView: 1,
@@ -401,9 +376,9 @@ The slider can automatically generate bullets from your slides. Just provide a c
 ```html
 <div class="slider">
   <div class="slider-feed">
-    <div class="lazer-slide">Slide 1</div>
-    <div class="lazer-slide">Slide 2</div>
-    <div class="lazer-slide">Slide 3</div>
+    <div class="slide">Slide 1</div>
+    <div class="slide">Slide 2</div>
+    <div class="slide">Slide 3</div>
   </div>
 
   <div class="slider-bullets"></div>
@@ -411,14 +386,14 @@ The slider can automatically generate bullets from your slides. Just provide a c
 ```
 
 ```css
-.lazer-bullets {
+.slider-bullets {
   display: flex;
   gap: 8px;
   justify-content: center;
   margin-top: 16px;
 }
 
-.lazer-bullet {
+.slider-bullet {
   width: 12px;
   height: 12px;
   border-radius: 50%;
@@ -428,16 +403,16 @@ The slider can automatically generate bullets from your slides. Just provide a c
   transition: background 0.3s;
 }
 
-.lazer-bullet.active {
+.slider-bullet.active {
   background: #333;
 }
 ```
 
 ```typescript
 const slider = createSlider({
-  feed: document.querySelector('.lazer-feed'),
+  feed: document.querySelector('.slider-feed'),
   slides: [...document.querySelectorAll('.slide')],
-  bulletsContainer: document.querySelector('.lazer-bullets'),
+  bulletsContainer: document.querySelector('.slider-bullets'),
   bulletsClass: 'slider-bullet',      // Optional: default is 'slider-bullet'
   bulletsActiveClass: 'active'        // Optional: default is 'active'
 })
@@ -456,9 +431,9 @@ Alternatively, you can create bullets manually and pass them via the `thumbs` op
 ```html
 <div class="slider">
   <div class="slider-feed">
-    <div class="lazer-slide">Slide 1</div>
-    <div class="lazer-slide">Slide 2</div>
-    <div class="lazer-slide">Slide 3</div>
+    <div class="slide">Slide 1</div>
+    <div class="slide">Slide 2</div>
+    <div class="slide">Slide 3</div>
   </div>
 
   <div class="slider-dots">
@@ -494,7 +469,7 @@ Alternatively, you can create bullets manually and pass them via the `thumbs` op
 
 ```typescript
 const slider = createSlider({
-  feed: document.querySelector('.lazer-feed'),
+  feed: document.querySelector('.slider-feed'),
   slides: [...document.querySelectorAll('.slide')],
   thumbs: [...document.querySelectorAll('.dot')]
 })
@@ -509,15 +484,15 @@ Auto-generate clickable thumbnail images from your slides. Perfect for product g
 ```html
 <div class="slider">
   <div class="slider-feed">
-    <div class="lazer-slide">
+    <div class="slide">
       <img src="/images/product-1.jpg" alt="Product 1">
       <h3>Product Title 1</h3>
     </div>
-    <div class="lazer-slide">
+    <div class="slide">
       <img src="/images/product-2.jpg" alt="Product 2">
       <h3>Product Title 2</h3>
     </div>
-    <div class="lazer-slide">
+    <div class="slide">
       <img src="/images/product-3.jpg" alt="Product 3">
       <h3>Product Title 3</h3>
     </div>
@@ -536,7 +511,7 @@ Auto-generate clickable thumbnail images from your slides. Perfect for product g
   justify-content: center;
 }
 
-.lazer-thumb {
+.slider-thumb {
   padding: 0;
   border: 2px solid transparent;
   background: none;
@@ -545,16 +520,16 @@ Auto-generate clickable thumbnail images from your slides. Perfect for product g
   transition: opacity 0.2s, border-color 0.2s;
 }
 
-.lazer-thumb:hover {
+.slider-thumb:hover {
   opacity: 0.8;
 }
 
-.lazer-thumb.active {
+.slider-thumb.active {
   opacity: 1;
   border-color: #007bff;
 }
 
-.lazer-thumb img {
+.slider-thumb img {
   display: block;
   border-radius: 4px;
 }
@@ -562,7 +537,7 @@ Auto-generate clickable thumbnail images from your slides. Perfect for product g
 
 ```typescript
 const slider = createSlider({
-  feed: document.querySelector('.lazer-feed'),
+  feed: document.querySelector('.slider-feed'),
   slides: [...document.querySelectorAll('.slide')],
   thumbsContainer: document.querySelector('.thumbs-gallery'),
   thumbsClass: 'slider-thumb',           // Optional: default is 'slider-thumb'
@@ -591,9 +566,9 @@ Create a draggable scrollbar that syncs with the slider position.
 ```html
 <div class="slider">
   <div class="slider-feed">
-    <div class="lazer-slide">Slide 1</div>
-    <div class="lazer-slide">Slide 2</div>
-    <div class="lazer-slide">Slide 3</div>
+    <div class="slide">Slide 1</div>
+    <div class="slide">Slide 2</div>
+    <div class="slide">Slide 3</div>
   </div>
 
   <div class="scrollbar-track">
@@ -622,7 +597,7 @@ Create a draggable scrollbar that syncs with the slider position.
 
 ```typescript
 const slider = createSlider({
-  feed: document.querySelector('.lazer-feed'),
+  feed: document.querySelector('.slider-feed'),
   slides: [...document.querySelectorAll('.slide')],
   scrollbarThumb: document.querySelector('.scrollbar-thumb'),
   scrollbarTrack: document.querySelector('.scrollbar-track')
@@ -654,7 +629,7 @@ Use `slidesPerView: 'auto'` when slides have different natural widths defined in
 
 ```typescript
 const slider = createSlider({
-  feed: document.querySelector('.lazer-feed'),
+  feed: document.querySelector('.slider-feed'),
   slides: [...document.querySelectorAll('.slide')],
   mobileSlidesPerView: 'auto',
   desktopSlidesPerView: 'auto',
@@ -667,13 +642,13 @@ const slider = createSlider({
 
 ```typescript
 const slider = createSlider({
-  feed: document.querySelector('.lazer-feed'),
+  feed: document.querySelector('.slider-feed'),
   slides: [...document.querySelectorAll('.slide')],
   prevSlideButton: document.querySelector('.prev'),
-  nextSlideButton: document.querySelector('.lazer-next'),
+  nextSlideButton: document.querySelector('.next'),
 
   // Navigation (choose one: bullets OR thumbs)
-  bulletsContainer: document.querySelector('.lazer-bullets'), // Auto-generated bullets
+  bulletsContainer: document.querySelector('.slider-bullets'), // Auto-generated bullets
   // OR for image galleries:
   // thumbsContainer: document.querySelector('.thumbs-gallery'),
   // thumbSize: { width: 80, height: 60 },
@@ -696,13 +671,75 @@ const slider = createSlider({
 })
 ```
 
-## CSS Customization
+## Accessibility
+
+The slider automatically adds ARIA attributes for accessibility:
+
+- `role="region"` and `aria-roledescription="carousel"` on the feed
+- `role="group"` and `aria-label="Slide X of Y"` on each slide
+- `aria-controls` linking buttons to the feed
+- `aria-hidden` and `tabindex` management for visibility
+- Keyboard navigation with arrow keys when feed is focused
+
+## TypeScript
+
+Full TypeScript support with exported types:
+
+```typescript
+import {
+  createSlider,
+  generateBullets,
+  generateThumbs,
+  type SliderSettings,
+  type Slider,
+  type EasingFunction,
+  type ScrollParams,
+  type ScrollStartParams,
+  type SliderDirection,
+  type MarqueeDirection
+} from 'lazer-slider'
+```
+
+> **Note:** `generateBullets` and `generateThumbs` are also exported if you need to manually generate navigation elements outside of the slider initialization.
+
+## Styling
+
+### Optional CSS
 
-When using the optional CSS file (`import 'lazer-slider/css'`), you can customize styles using CSS custom properties:
+Lazer Slider ships with an optional stylesheet that provides ready-to-use styles:
+
+```js
+import 'lazer-slider/css'
+```
+
+### CSS Classes
+
+The stylesheet provides these class names:
+
+| Class | Description |
+|-------|-------------|
+| `.lazer-slider` | Optional wrapper container |
+| `.lazer-feed` | Scrollable container (horizontal) |
+| `.lazer-feed.lazer-vertical` | Vertical slider variant |
+| `.lazer-feed.lazer-draggable` | Adds grab cursor for drag-enabled sliders |
+| `.lazer-slide` | Individual slide |
+| `.lazer-bullets` | Bullets container |
+| `.lazer-bullet` | Individual bullet/dot |
+| `.lazer-thumbs` | Thumbnails container |
+| `.lazer-thumb` | Individual thumbnail |
+| `.lazer-track` | Scrollbar track |
+| `.lazer-scrollbar` | Scrollbar thumb |
+| `.lazer-nav` | Navigation button base |
+| `.lazer-prev` | Previous button |
+| `.lazer-next` | Next button |
+
+### CSS Custom Properties
+
+Customize the look by overriding CSS variables:
 
 ```css
 :root {
-  /* Bullets / Dots */
+  /* Bullets */
   --lazer-bullet-size: 12px;
   --lazer-bullet-gap: 8px;
   --lazer-bullet-color: #cbd5e1;
@@ -725,7 +762,7 @@ When using the optional CSS file (`import 'lazer-slider/css'`), you can customiz
   --lazer-thumb-color: #1e293b;
   --lazer-track-radius: 2px;
 
-  /* Navigation Buttons */
+  /* Navigation */
   --lazer-nav-size: 40px;
   --lazer-nav-offset: 12px;
   --lazer-nav-bg: rgba(255, 255, 255, 0.9);
@@ -739,85 +776,27 @@ When using the optional CSS file (`import 'lazer-slider/css'`), you can customiz
 }
 ```
 
-### CSS Classes
-
-The slider automatically adds these classes for CSS targeting:
+### Custom Styles (No CSS Import)
 
-| Class | Applied To | Description |
-|-------|------------|-------------|
-| `.lazer-feed` | Feed element | Scrollable container |
-| `.lazer-slide` | Slide elements | Individual slides |
-| `.lazer-vertical` | Feed element | When using vertical direction |
-| `.lazer-marquee` | Feed element | When marquee mode is enabled |
-
-You can use these classes in your CSS:
+If you prefer not to use the included styles, here's the minimal CSS required:
 
 ```css
-.lazer-feed {
-  /* Style the feed container */
+.slider-feed {
+  display: flex;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
 }
 
-.lazer-slide {
-  /* Style individual slides */
+.slider-feed::-webkit-scrollbar {
+  display: none;
 }
 
-.lazer-feed.lazer-vertical {
-  /* Style vertical sliders */
+.slide {
+  flex-shrink: 0;
 }
 ```
 
-### Available Classes
-
-| Class | Element | Description |
-|-------|---------|-------------|
-| `.lazer-slider` | Container | Optional wrapper |
-| `.lazer-feed` | Feed | Scrollable container |
-| `.lazer-slide` | Slide | Individual slides |
-| `.lazer-bullets` | Bullets container | Dot navigation wrapper |
-| `.lazer-bullet` | Bullet | Individual dot |
-| `.lazer-thumbs` | Thumbs container | Thumbnail navigation wrapper |
-| `.lazer-thumb` | Thumb | Individual thumbnail |
-| `.lazer-track` | Scrollbar track | Scrollbar background |
-| `.lazer-scrollbar` | Scrollbar thumb | Draggable scrollbar |
-| `.lazer-nav` | Nav button | Navigation button base |
-| `.lazer-prev` | Prev button | Previous button |
-| `.lazer-next` | Next button | Next button |
-
-## Accessibility
-
-The slider automatically adds ARIA attributes for accessibility:
-
-- `role="region"` and `aria-roledescription="carousel"` on the feed
-- `role="group"` and `aria-label="Slide X of Y"` on each slide
-- `aria-controls` linking buttons to the feed
-- `aria-hidden` and `tabindex` management for visibility
-- Keyboard navigation with arrow keys when feed is focused
-
-## TypeScript
-
-Full TypeScript support with exported types:
-
-```typescript
-import {
-  createSlider,
-  generateBullets,
-  generateThumbs,
-  injectStyles,
-  removeStyles,
-  type SliderSettings,
-  type Slider,
-  type EasingFunction,
-  type ScrollParams,
-  type ScrollStartParams,
-  type SliderDirection,
-  type MarqueeDirection
-} from 'lazer-slider'
-```
-
-> **Note:** `generateBullets` and `generateThumbs` are also exported if you need to manually generate navigation elements outside of the slider initialization.
-
-> **Note:** `injectStyles()` is called automatically by `createSlider()`. Use it manually only if you need to inject styles before creating a slider (e.g., for SSR hydration). `removeStyles()` removes the injected styles from the document.
-
 ## Browser Support
 
 - Chrome (latest)