ngx-edge-slider 2.2.0 → 2.2.2

package/README.md

@@ -0,0 +1,653 @@
+# WingmanColt Angular Slider
+
+A modern, fully reactive, plugin‑driven **Angular slider / carousel library** built for **Angular 18+**.
+
+
+Video :
+https://youtu.be/tGZ5qX70KU0
+
+Main Slider (3 rendere sliders on homepage):
+https://obscene.me/
+
+Main Slider + Thumb Slider :
+https://obscene.me/shop/product/the-devil
+
+WingmanColt is designed for **production‑grade UI systems** where flexibility, performance, and clean architecture matter. It supports **dragging**, **pagination**, **navigation**, **autoplay**, **responsive breakpoints**, and **synced thumbnail sliders**, all powered by a small, predictable core engine.
+
+---
+
+## ✨ Features
+
+- ✅ Angular **18+** compatible (Standalone components)
+- ⚡ **RxJS‑driven state** (predictable & debuggable)
+- 🧩 **Plugin architecture** (enable only what you need)
+- 🖱️ Pointer‑based dragging (mouse + touch)
+- 📱 Responsive breakpoints (container‑aware)
+- 🧭 Navigation arrows
+- 🔘 Pagination (dots)
+- ▶️ Autoplay (configurable)
+- 🖼️ **Main + Thumbs slider syncing**
+- 📐 Vertical & horizontal modes
+- 🎯 Click‑to‑select slides
+- ♻️ Safe re‑initialization on data changes
+
+---
+
+## 📦 Installation
+
+```bash
+npm install ngx-edge-slider
+```
+
+> Angular **18 or newer** is required.
+
+---
+
+## 🚀 Quick Start
+
+### 1️⃣ Import the module
+
+```ts
+import { NgxEdgeSliderModule } from "ngx-edge-slider";
+
+@Component({
+  standalone: true,
+  imports: [NgxEdgeSliderModule],
+})
+export class AppComponent {}
+```
+
+Or use as standalone
+```ts
+@Component({
+  selector: 'app-root',
+  imports: [CommonModule, NgxEdgeSliderModule],
+  templateUrl: './app.html',
+  styleUrl: './app.scss',
+  encapsulation: ViewEncapsulation.None,
+})
+```
+
+
+---
+### Import Style
+
+```css
+@import 'ngx-edge-slider/assets/ngx-simple-slider.scss';
+OR
+@import 'ngx-edge-slider/assets/ngx-simple-slider.css';
+
+OR USE CDN
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WingmanColt/ngx-edge-slider@master/projects/ngx-edge-slider/assets/ngx-simple-slider.scss"/>
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WingmanColt/ngx-edge-slider@master/projects/ngx-edge-slider/assets/ngx-simple-slider.css"/>
+
+```
+
+
+---
+
+### 2️⃣ Basic Slider Usage
+
+```html
+<app-simple-slider  #MainSlider [config]="sliderConfig"  [slideTemplate]="mainSlideTemplate" (slideChange)="onSlideChange($event)"></app-simple-slider>
+
+      <ng-template #mainSlideTemplate let-slide="slide" let-index="index">
+        <div class="slide-content">
+          <img [src]="slide.image" alt="Slide {{ index + 1 }}" />
+        </div>
+      </ng-template>
+```
+
+```ts
+sliderConfig: SliderConfig = {
+  slides: this.slides,
+  slidesPerView: 1,
+  plugins: {
+    draggable: true,
+    pagination: true,
+    navigation: true,
+  },
+};
+```
+
+---
+
+## 🧱 Slide Templates
+
+WingmanColt is **template‑driven**. You fully control slide markup.
+
+```html
+<app-simple-slider [config]="sliderConfig" [slideTemplate]="slideTpl"></app-simple-slider>
+
+<ng-template #slideTpl let-slide let-index="index">
+  <img [src]="slide.image" />
+</ng-template>
+```
+
+---
+
+## Full Component with MainSlider, ThumbSlider Pagination, Navigation
+
+
+```html
+<div style="padding: 100px">
+  <ng-container *ngIf="this.slides.length">
+    <div class="slider-container" style="position: relative">
+      <app-simple-slider
+        #MainSlider
+        [config]="sliderConfig"
+        class="slider-main-product"
+        [slideTemplate]="mainSlideTemplate"
+        (slideChange)="onSlideChangeMain($event)"
+      >
+      </app-simple-slider>
+
+      <ng-template #mainSlideTemplate let-slide="slide" let-index="index">
+        <div class="slide-content">
+          <img [src]="slide.image" alt="Slide {{ index + 1 }}" />
+        </div>
+      </ng-template>
+
+      <!-- NAVIGATION -->
+      <div class="slider-nav" [ngClass]="'nav--' + navPosition">
+        <button
+          type="button"
+          class="nav-btn nav-btn--prev"
+          [class.is-hidden]="!(canPrev$ | async)"
+          (click)="onPrevClick($event)"
+          aria-label="Previous"
+        >
+          <
+        </button>
+
+        <button
+          type="button"
+          class="nav-btn nav-btn--next"
+          [class.is-hidden]="!(canNext$ | async)"
+          (click)="onNextClick($event)"
+          aria-label="Next"
+        >
+          >
+        </button>
+      </div>
+      <ng-container *ngIf="pager$ | async as pager">
+        <div class="slider-pagination" *ngIf="pager">
+          <div class="thumb-dots-wrapper">
+            <div
+              *ngFor="let slideIndex of pager.visibleDots; let i = index"
+              (click)="goToSlide(slideIndex)"
+            >
+              <span
+                class="thumb-dot"
+                [class.active]="slideIndex === pager.visibleDots[pager.activeDotIndex]"
+                [class.inactive]="slideIndex !== pager.visibleDots[pager.activeDotIndex]"
+              ></span>
+            </div>
+          </div>
+        </div>
+      </ng-container>
+    </div>
+  </ng-container>
+
+  <!-- Thumbs Slider -->
+  <ng-container *ngIf="sliderConfigThumbs?.slides?.length">
+    <div class="thumbs-wrapper">
+      <div
+        class="thumb-nav thumb-nav--left"
+        [class.activeArrow]="(thumbsState$ | async)?.canPrev"
+        (click)="ThumbsSlider?.prev()"
+      ></div>
+      <app-simple-slider
+        #ThumbsSlider
+        [config]="sliderConfigThumbs"
+        [slideTemplate]="ThumbsSlideTemplate"
+      ></app-simple-slider>
+
+      <ng-template #ThumbsSlideTemplate let-slide="slide" let-index="index">
+        <div
+          class="slide-content"
+          [class.slide--current]="(thumbsState$ | async)?.selectedSlide === index"
+          (click)="onThumbClick(index)"
+        >
+          <img [src]="slide.image" alt="Slide {{ index + 1 }}" />
+        </div>
+      </ng-template>
+
+      <div
+        class="thumb-nav thumb-nav--right"
+        [class.activeArrow]="(thumbsState$ | async)?.canNext"
+        (click)="ThumbsSlider?.next()"
+      ></div>
+    </div>
+  </ng-container>
+</div>
+
+```
+
+---
+
+---
+
+## Full TS File
+
+```ts
+import { CommonModule } from '@angular/common';
+import { Component, OnInit, signal, ViewChild, ViewEncapsulation } from '@angular/core';
+import {
+  NavPosition,
+  NgxEdgeSliderModule,
+  Pager,
+  SimpleSliderComponent,
+  SliderConfig,
+} from 'ngx-edge-slider';
+import { Observable, take } from 'rxjs';
+
+@Component({
+  selector: 'app-root',
+  imports: [CommonModule, NgxEdgeSliderModule],
+  templateUrl: './app.html',
+  styleUrl: './app.scss',
+  encapsulation: ViewEncapsulation.None,
+})
+export class App implements OnInit {
+  slidesArray = [
+    {
+      image: 'https://obscene.me/assets/images/products/27/image-1/image-1.webp',
+      caption: 'First Slide',
+    },
+    {
+      image: 'https://obscene.me/assets/images/products/27/image-2/image-2.webp',
+      caption: 'Second Slide',
+    },
+    {
+      image: 'https://obscene.me/assets/images/products/27/image-3/image-3.webp',
+      caption: 'Third Slide',
+    },
+    {
+      image: 'https://obscene.me/assets/images/products/27/image-4/image-4.webp',
+      caption: 'Fourth Slide',
+    },
+    {
+      image: 'https://obscene.me/assets/images/products/27/image-3/image-3.webp',
+      caption: 'Third Slide',
+    },
+    {
+      image: 'https://obscene.me/assets/images/products/27/image-1/image-1.webp',
+      caption: 'First Slide',
+    },
+    {
+      image: 'https://obscene.me/assets/images/products/27/image-2/image-2.webp',
+      caption: 'Second Slide',
+    },
+  ];
+
+  private isSyncing = false;
+  slides: any[] = [...this.slidesArray];
+
+  sliderConfig!: SliderConfig;
+  sliderConfigThumbs!: SliderConfig;
+
+  navPosition: NavPosition = 'top-right'; // change this to switch layouts "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "center-sides";
+
+  @ViewChild('MainSlider') MainSlider!: SimpleSliderComponent;
+  @ViewChild('ThumbsSlider') ThumbsSlider?: SimpleSliderComponent;
+
+  constructor() {}
+
+  ngOnInit(): void {
+    this.sliderConfig = {
+      slides: this.slides,
+      slidesPerView: 1,
+      slidesToSlide: 1,
+      isThumbs: false,
+      plugins: {
+        draggable: true,
+        pagination: true,
+        navigation: true,
+        autoplay: undefined,
+      },
+    };
+
+    this.sliderConfigThumbs = {
+      slides: this.slides,
+      slidesPerView: 4, // desktop default
+      slidesToSlide: 1,
+      isThumbs: true,
+      plugins: {
+        pagination: true, // enable pagination
+        navigation: true, // optional
+        draggable: true, // optional
+        autoplay: undefined,
+      },
+      showOn: { mobile: false, tablet: true, desktop: true },
+      breakpoints: {
+        mobile: { slidesPerView: 0 }, // not used because showOn.mobile=false
+        tablet: { slidesPerView: 4 },
+        desktop: { slidesPerView: 5 },
+      },
+    };
+  }
+
+  /** Sync sliders */
+  onSlideChangeMain(index: number) {
+    this.syncSliders(index);
+  }
+  onSlideChangeThumbs(index: number) {
+    this.syncSliders(index);
+  }
+  onThumbClick(index: number) {
+    this.syncSliders(index);
+  }
+
+  private syncSliders(index: number) {
+    if (this.isSyncing) return;
+    this.isSyncing = true;
+
+    this.MainSlider?.goTo(index);
+    this.ThumbsSlider?.goTo(index);
+
+    this.isSyncing = false;
+  }
+
+  // GET SLIDER STATES
+  get mainState$() {
+    return this.MainSlider?.state$;
+  }
+  get thumbsState$() {
+    return this.ThumbsSlider?.state$;
+  }
+
+  // NAVIGATION
+  get canPrev$(): Observable<boolean> | null {
+    if (!this.MainSlider || !this.MainSlider.canPrev$) {
+      console.warn('Navigation plugin is not enabled for this slider.');
+      return null;
+    }
+    return this.MainSlider.canPrev$;
+  }
+
+  get canNext$(): Observable<boolean> | null {
+    if (!this.MainSlider || !this.MainSlider.canNext$) {
+      console.warn('Navigation plugin is not enabled for this slider.');
+      return null;
+    }
+    return this.MainSlider.canNext$;
+  }
+
+  onPrevClick(event?: MouseEvent) {
+    event?.stopPropagation();
+    event?.preventDefault();
+
+    this.MainSlider?.canPrev$?.pipe(take(1)).subscribe((can) => {
+      if (can) this.MainSlider.prev?.();
+    });
+  }
+
+  onNextClick(event?: MouseEvent) {
+    event?.stopPropagation();
+    event?.preventDefault();
+
+    this.MainSlider?.canNext$?.pipe(take(1)).subscribe((can) => {
+      if (can) this.MainSlider.next?.();
+    });
+  }
+
+  // PAGINATION
+  get pager$(): Observable<Pager | null> | null {
+    if (!this.MainSlider?.pager$) {
+      console.warn('Pagination plugin is not enabled for this slider.');
+      return null;
+    }
+    return this.MainSlider.pager$;
+  }
+
+  goToSlide(index: number) {
+    this.MainSlider?.goToSlide?.(index);
+  }
+
+  protected readonly title = signal('slider-test');
+}
+
+```
+----
+
+## 🔧 SliderConfig Reference
+
+```ts
+export interface SliderConfig {
+  slides: any[];
+  slidesPerView: number;
+  slidesToSlide?: number;
+  loop?: 0 | 1 | 2;
+  vertical?: boolean;
+  changeToClickedSlide?: boolean;
+  isThumbs?: boolean;
+  gap?: number;
+
+  breakpoints?: {
+    mobile?: Partial<SliderConfig>;
+    tablet?: Partial<SliderConfig>;
+    desktop?: Partial<SliderConfig>;
+  };
+
+  plugins?: {
+    draggable?: boolean;
+    autoplay?: { delay?: number };
+    navigation?: boolean;
+    pagination?: boolean;
+  };
+
+  showOn?: {
+    mobile?: boolean;
+    tablet?: boolean;
+    desktop?: boolean;
+  };
+}
+```
+
+---
+
+## 🔌 Plugins
+
+Plugins are **opt‑in**. Only enabled plugins are initialized.
+
+### Draggable
+
+```ts
+plugins: {
+  draggable: true;
+}
+```
+
+- Mouse + touch dragging
+- Pointer capture outside slider bounds
+
+---
+
+### Navigation
+
+```ts
+plugins: {
+  navigation: true;
+}
+```
+
+```html
+<button (click)="slider.prev()">Prev</button>
+<button (click)="slider.next()">Next</button>
+```
+
+Reactive state:
+
+```ts
+slider.canPrev$;
+slider.canNext$;
+```
+
+---
+
+### Pagination
+
+```ts
+plugins: {
+  pagination: true;
+}
+```
+
+```ts
+slider.pager$; // Observable<Pager>
+```
+
+Pager structure:
+
+```ts
+interface Pager {
+  currentPage: number;
+  totalPages: number;
+  visibleDots: number[];
+  activeDotIndex: number;
+}
+```
+
+---
+
+### Autoplay
+
+```ts
+plugins: {
+  autoplay: {
+    delay: 3000;
+  }
+}
+```
+
+- Automatically pauses during dragging
+- Resumes safely
+
+---
+
+## 🖼️ Thumbnails Slider (Main + Thumbs)
+
+WingmanColt supports **fully synced sliders**.
+
+```html
+<app-simple-slider #MainSlider [config]="mainConfig" (slideChange)="onMainChange($event)"></app-simple-slider>
+
+<app-simple-slider #ThumbsSlider [config]="thumbsConfig"></app-simple-slider>
+```
+
+```ts
+onMainChange(index: number) {
+  this.MainSlider.goTo(index);
+  this.ThumbsSlider.goTo(index);
+}
+```
+
+Thumbs config example:
+
+```ts
+thumbsConfig = {
+  slides,
+  slidesPerView: 5,
+  isThumbs: true,
+  plugins: { draggable: true, navigation: true },
+  breakpoints: {
+    tablet: { slidesPerView: 4 },
+    desktop: { slidesPerView: 5 },
+  },
+};
+```
+
+---
+
+## 📐 Responsive Breakpoints
+
+Breakpoints are **container‑aware**, not just viewport‑based.
+
+```ts
+breakpoints: {
+  mobile: { slidesPerView: 1 },
+  tablet: { slidesPerView: 2 },
+  desktop: { slidesPerView: 4 }
+}
+```
+
+Visibility control:
+
+```ts
+showOn: {
+  mobile: false,
+  tablet: true,
+  desktop: true
+}
+```
+
+---
+
+## 🧠 Architecture Overview
+
+- **SliderEngine** – core logic, movement, breakpoints
+- **SliderStore** – RxJS state container
+- **Plugins** – isolated feature modules
+- **SimpleSliderComponent** – UI wrapper
+
+This separation allows:
+
+- Easy feature expansion
+- Predictable state transitions
+- Minimal DOM coupling
+
+---
+
+## ♻️ Lifecycle & Reinitialization
+
+The slider safely re‑initializes when:
+
+- Slides array reference changes
+- Breakpoints change
+- Container size changes
+
+```ts
+this.engine.destroy();
+this.engine.init(newConfig);
+```
+
+---
+
+## 🛠️ Requirements
+
+- Angular **18+**
+- RxJS **7+**
+- Browser support for `ResizeObserver`
+
+---
+
+## 🧪 Status
+
+WingmanColt is **production‑ready**, actively evolving, and designed for real‑world applications.
+
+Planned enhancements:
+
+- ⏩ Loop modes
+- 🎞️ Animation presets
+- ♿ Accessibility helpers
+- 🔄 Virtual slides
+
+---
+
+## 📄 License
+
+MIT
+
+---
+
+## 👤 Author
+
+**WingmanColt**
+Angular & Full‑Stack Engineer
+
+---
+
+If you find this library useful, ⭐️ the repository and feel free to contribute.

package/assets/ngx-simple.slider.css

@@ -0,0 +1,413 @@
+:host {
+  display: block;
+  position: relative;
+}
+
+/* ---------------- Main Slider ---------------- */
+.slider-main-product {
+  display: inline-flex;
+  height: 520px;
+}
+
+.slider-main {
+  width: 100%;
+  height: 600px;
+  justify-content: center;
+  display: flex;
+}
+
+@media (max-width: 577px) {
+  .slider-main {
+    height: 100%;
+    display: block;
+  }
+}
+.slider--main {
+  height: 100%;
+  overflow: hidden;
+}
+.slider--main .slider__wrapper {
+  display: flex;
+  will-change: transform;
+}
+.slider--main .slider__wrapper .slide {
+  flex: 0 0 100%;
+}
+.slider--main .slider__wrapper .slide .slide-content,
+.slider--main .slider__wrapper .slide picture {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.slider--main .slider__wrapper .slide .slide-content .drag-handle,
+.slider--main .slider__wrapper .slide picture .drag-handle {
+  width: 100%;
+  height: 100%;
+  cursor: grab;
+  z-index: 10;
+  pointer-events: all;
+}
+.slider--main .slider__wrapper .slide .slide-content img,
+.slider--main .slider__wrapper .slide picture img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  display: block;
+  transform-origin: center;
+  transform: translateZ(0);
+  pointer-events: none;
+}
+
+/* ---------------- Thumbs Slider ---------------- */
+.slider--thumbs {
+  margin-top: 24px;
+  margin-bottom: 36px;
+  height: 70px !important;
+}
+.slider--thumbs .slider__wrapper {
+  display: flex;
+  gap: 8px;
+  will-change: transform;
+  transform: translateZ(0);
+}
+.slider--thumbs .slide {
+  flex: 0 0 auto;
+  pointer-events: auto;
+}
+.slider--thumbs .slide .slide-content {
+  width: 54px;
+  height: 68px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #ebebeb;
+  cursor: pointer;
+}
+.slider--thumbs .slide .slide-content img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  display: block;
+  transform: scale(0.9);
+}
+.slider--thumbs .slide .slide-content.slide--current {
+  border-color: #212121;
+}
+
+/* ---------------- Main Slider Container ---------------- */
+.slider {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  touch-action: none;
+  cursor: grab;
+  user-select: none;
+  -webkit-user-drag: none;
+  -webkit-tap-highlight-color: transparent;
+}
+.slider.slider-can-drag {
+  cursor: grab;
+}
+.slider.slider-is-dragging {
+  cursor: grabbing;
+}
+.slider.slider-dragged {
+  /* optional, e.g., subtle shadow after drag */
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+.slider.slider-drag-prevent-click {
+  pointer-events: none; /* prevent accidental clicks while dragging */
+}
+.slider .slider__wrapper {
+  display: flex;
+  transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.84);
+  will-change: transform;
+  transform: none;
+  width: auto;
+  height: 100%;
+}
+.slider .slide {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  overflow: hidden;
+  flex-shrink: 0;
+  position: relative;
+  transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.84);
+}
+
+@media (min-width: 1441px) {
+  .slider--thumbs .slide {
+    flex: 0 0 20%;
+  }
+}
+@media (max-width: 1024px) {
+  .slider--thumbs .slide {
+    flex: 0 0 33.333%;
+  }
+}
+@media (max-width: 1023px) {
+  .slider--thumbs .slide {
+    flex: 0 0 50%;
+  }
+}
+/* ---------------- Optional Arrows ---------------- */
+.slider-arrow-next,
+.slider-arrow-prev {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 32px;
+  height: 32px;
+  background: rgba(255, 255, 255, 0.8) no-repeat center center;
+  cursor: pointer;
+  z-index: 10;
+}
+.slider-arrow-next.next,
+.slider-arrow-prev.next {
+  right: 10px;
+}
+.slider-arrow-next.prev,
+.slider-arrow-prev.prev {
+  left: 10px;
+}
+
+/* ---------------- Arrows L/R on Thumbs ---------------- */
+.thumbs-wrapper {
+  position: relative;
+}
+
+.thumb-nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 20;
+  width: 48px;
+  height: 48px;
+  background: rgba(255, 255, 255, 0.9)
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='4.51 0.01 10.99 19.97'%3E%3Cpath fill='%23000' d='m4.508 18.968 1.006 1.006 9.983-9.984L5.514.005 4.508 1.011l8.984 8.984-8.984 8.973Z'/%3E%3C/svg%3E")
+    no-repeat center center/11px 18px;
+  font-size: 36px;
+  line-height: 56px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 200ms ease;
+}
+.thumb-nav.activeArrow {
+  opacity: 1;
+  pointer-events: all;
+}
+.thumb-nav--left {
+  left: -73px;
+  transform: translateY(-50%) rotate(180deg) !important;
+}
+.thumb-nav--right {
+  right: -65px;
+}
+
+.slider-pagination .thumb-dots-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+}
+.slider-pagination .thumb-dots-wrapper .thumb-dot {
+  display: inline-block;
+  width: 4px;
+  height: 4px;
+  margin: 0 0 0 8px;
+  border-radius: 50%;
+  background: #b3b3b3;
+}
+.slider-pagination .thumb-dots-wrapper .thumb-dot.active {
+  background: #212121;
+  border: 1px solid #212121;
+}
+.slider-pagination .thumb-dots-wrapper .thumb-dot:hover {
+  background: #212121;
+  border: 1px solid #212121;
+}
+.slider-pagination .thumb-dots-wrapper .thumb-dot.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.slider-container {
+  position: relative;
+  z-index: 10;
+}
+.slider-container .slider {
+  position: relative;
+  z-index: 1;
+}
+.slider-container .slider.slider-is-dragging {
+  pointer-events: none;
+}
+.slider-container .slider-nav {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 20;
+}
+.slider-container .slider-nav .nav-btn {
+  pointer-events: auto;
+  z-index: 30;
+  position: absolute;
+  width: 42px;
+  height: 42px;
+  border-radius: 2px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  cursor: pointer;
+  background: transparent;
+  font-size: 32px;
+  line-height: 1;
+  transition:
+    transform 0.15s ease,
+    opacity 0.15s ease;
+}
+.slider-container .slider-nav .nav-btn:hover {
+  transform: translateY(-1px);
+  background: rgba(0, 0, 0, 0.6);
+}
+.slider-container .slider-nav .nav-btn.is-hidden {
+  color: rgba(160, 160, 165, 0.5529411765);
+  opacity: 0.3;
+  cursor: not-allowed;
+  pointer-events: auto;
+}
+.slider-container .slider-nav.nav--top-left .nav-btn--prev {
+  top: -50px;
+  left: -20px;
+}
+.slider-container .slider-nav.nav--top-left .nav-btn--next {
+  top: -50px;
+  left: 42px;
+}
+.slider-container .slider-nav.nav--top-center .nav-btn--prev {
+  top: -50px;
+  left: 50%;
+  transform: translateX(-50px);
+}
+.slider-container .slider-nav.nav--top-center .nav-btn--next {
+  top: -50px;
+  left: 50%;
+  transform: translateX(10px);
+}
+.slider-container .slider-nav.nav--top-right .nav-btn--prev {
+  top: -50px;
+  right: 42px;
+}
+.slider-container .slider-nav.nav--top-right .nav-btn--next {
+  top: -50px;
+  right: -20px;
+}
+.slider-container .slider-nav.nav--bottom-left .nav-btn--prev {
+  bottom: 30px;
+  left: -20px;
+}
+.slider-container .slider-nav.nav--bottom-left .nav-btn--next {
+  bottom: 30px;
+  left: 42px;
+}
+.slider-container .slider-nav.nav--bottom-center .nav-btn--prev {
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(-50px);
+}
+.slider-container .slider-nav.nav--bottom-center .nav-btn--next {
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(10px);
+}
+.slider-container .slider-nav.nav--bottom-right .nav-btn--prev {
+  bottom: 30px;
+  right: 42px;
+}
+.slider-container .slider-nav.nav--bottom-right .nav-btn--next {
+  bottom: 30px;
+  right: -20px;
+}
+.slider-container .slider-nav.nav--center-sides .nav-btn {
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+}
+.slider-container .slider-nav.nav--center-sides .nav-btn--prev {
+  top: 50%;
+  left: -50px;
+  transform: translateY(-50%);
+}
+.slider-container .slider-nav.nav--center-sides .nav-btn--next {
+  top: 50%;
+  right: -50px;
+  transform: translateY(-50%);
+}
+@media (max-width: 1024px) {
+  .slider-container .slider-nav .nav--top-left .nav-btn--prev,
+  .slider-container .slider-nav .nav--top-center .nav-btn--prev,
+  .slider-container .slider-nav .nav--top-right .nav-btn--prev,
+  .slider-container .slider-nav .nav--bottom-left .nav-btn--prev,
+  .slider-container .slider-nav .nav--bottom-center .nav-btn--prev,
+  .slider-container .slider-nav .nav--bottom-right .nav-btn--prev,
+  .slider-container .slider-nav .nav--center-sides .nav-btn--prev {
+    left: clamp(8px, 5%, 40px);
+    right: auto;
+  }
+  .slider-container .slider-nav .nav--top-left .nav-btn--next,
+  .slider-container .slider-nav .nav--top-center .nav-btn--next,
+  .slider-container .slider-nav .nav--top-right .nav-btn--next,
+  .slider-container .slider-nav .nav--bottom-left .nav-btn--next,
+  .slider-container .slider-nav .nav--bottom-center .nav-btn--next,
+  .slider-container .slider-nav .nav--bottom-right .nav-btn--next,
+  .slider-container .slider-nav .nav--center-sides .nav-btn--next {
+    right: clamp(8px, 5%, 20px);
+    left: auto;
+  }
+}
+@media (max-width: 768px) {
+  .slider-container .slider-nav .nav-btn {
+    width: 36px;
+    height: 36px;
+    font-size: 24px;
+  }
+}
+@media (max-width: 480px) {
+  .slider-container .slider-nav .slider-container .slider-nav.nav--center-sides {
+    pointer-events: auto;
+  }
+  .slider-container .slider-nav .slider-container .slider-nav.nav--center-sides .nav-btn {
+    width: 32px;
+    height: 32px;
+    font-size: 20px;
+    pointer-events: auto;
+    z-index: 20;
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
+  }
+  .slider-container .slider-nav .slider-container .slider__wrapper {
+    position: relative;
+  }
+  .slider-container .slider-nav .slider-container .slider__wrapper .slide-content {
+    pointer-events: auto;
+  }
+  .slider-container .slider-nav .nav-btn {
+    width: 32px;
+    height: 32px;
+    font-size: 20px;
+  }
+  .slider-container .slider-nav .nav-btn--prev {
+    left: 8px !important;
+    right: auto !important;
+  }
+  .slider-container .slider-nav .nav-btn--next {
+    right: 8px !important;
+    left: auto !important;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-edge-slider",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "peerDependencies": {
     "@angular/common": ">=18.0.0",
     "@angular/core": ">=18.0.0",
@@ -23,4 +23,4 @@
       "default": "./fesm2022/ngx-edge-slider.mjs"
     }
   }
-}
+}