@madj2k/fe-frontend-kit 2.0.26 → 2.0.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@madj2k/fe-frontend-kit",
-  "version": "2.0.26",
+  "version": "2.0.28",
   "description": "Shared frontend utilities, menus and mixins for projects",
 	"main": "index.js",
 	"style": "index.scss",

package/readme.md

@@ -402,11 +402,13 @@ A lightweight fade slider using opacity and z-index.
 Init with available options:
 ```
 import { Madj2kSimpleFadeSlider } from '@madj2k/fe-frontend-kit/tools/simple-fade-slider';
-const fadeSlider = new Madj2kSimpleFadeSlider('.js-fade-slider', {
-    duration: 8,
-    classSlide: 'fade-slider-item',
-    classVisible: 'is-visible',
-    debug: true
+document.querySelectorAll('.js-fade-slider').forEach((el) => {
+    new Madj2kSimpleFadeSlider(el, {
+        duration: 8,
+        classSlide: 'fade-slider-item',
+        classVisible: 'is-visible',
+        debug: true
+    });
 });
 ```
 

package/tools/simple-fade-slider/simple-fade-slider-2.0.js

@@ -10,17 +10,19 @@
  *
  * @author Steffen Kroggel <developer@steffenkroggel.de>
  * @copyright 2025 Steffen Kroggel
- * @version 1.0.0
+ * @version 1.1.0
  * @license GNU General Public License v3.0
  * @see https://www.gnu.org/licenses/gpl-3.0.en.html
  *
  * @example
- * // Initialize with defaults
- * const slider = new Madj2kSimpleFadeSlider('.js-fade-sliderr');
+ * // Initialize with a single DOM element
+ * const el = document.querySelector('.js-fade-slider');
+ * const slider = new Madj2kSimpleFadeSlider(el);
  *
  * @example
  * // Initialize with custom config
- * const slider = new Madj2kSimpleFadeSlider('.js-fade-sliderr', {
+ * const el = document.querySelector('.js-fade-slider');
+ * const slider = new Madj2kSimpleFadeSlider(el, {
  *   duration: 8,
  *   classSlide: 'fade-slider-item',
  *   classVisible: 'is-visible',
@@ -28,8 +30,14 @@
  * });
  *
  * @example
+ * // Initialize multiple sliders with forEach
+ * document.querySelectorAll('.js-fade-slider').forEach((el) => {
+ *   new Madj2kSimpleFadeSlider(el, { duration: 6 });
+ * });
+ *
+ * @example
  * // Example HTML
- * <section class="fade-slider js-fade-sliderr" aria-label="Image gallery">
+ * <section class="fade-slider js-fade-slider" aria-label="Image gallery">
  *   <div class="fade-slider-item"><img src="img1.jpg" alt="Description 1"></div>
  *   <div class="fade-slider-item"><img src="img2.jpg" alt="Description 2"></div>
  *   <div class="fade-slider-item"><img src="img3.jpg" alt="Description 3"></div>
@@ -60,22 +68,26 @@
 class Madj2kSimpleFadeSlider {
   config = {
     duration: 12,
-    classSlide: 'fade-slide',
+    classSlide: 'fade-slider-item',
     classVisible: 'is-visible',
     debug: false
   };
 
   /**
-   * @param {string} selector - CSS selector for the slider container
+   * @param {HTMLElement} container - DOM element for the slider container
    * @param {Object} config - configuration options
    * @param {number} [config.duration=12] - time in seconds between slide changes
-   * @param {string} [config.classSlide='fade-slide'] - class for each slide
+   * @param {string} [config.classSlide='fade-slider-item'] - class for each slide
    * @param {string} [config.classVisible='is-visible'] - class for visible slide
    * @param {boolean} [config.debug=false] - enable debug logging
    */
-  constructor(selector, config = {}) {
-    this.container = document.querySelector(selector);
-    if (!this.container) return;
+  constructor(container, config = {}) {
+    if (!(container instanceof HTMLElement)) {
+      console.warn('[Madj2kSimpleFadeSlider] No valid container element provided.');
+      return;
+    }
+
+    this.container = container;
 
     this.config = {
       ...this.config,