feat: support navigation by multiple items WIP

This commit goes in the direction of more generic slider rather than just a gallery. The purpose of this commit is to make making something like a product carousel, where multiple elements are visible, possible.
daelmaak · Sep 4, 2023 · 9ff0fae · 9ff0fae
1 parent 988d94d
commit 9ff0fae
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 3 deletions.
diff --git a/apps/demo/src/app/app.component.html b/apps/demo/src/app/app.component.html
@@ -71,6 +71,7 @@ <h2 id="demos">Demos</h2>
         [loop]="true"
         loading="lazy"
         [visibleItems]="mobile ? 1.5 : 3"
+        [moveByItems]="mobile ? 1.5 : 3"
       ></gallery>
     </app-showcase>
 

diff --git a/libs/gallery/src/lib/components/gallery/gallery.component.html b/libs/gallery/src/lib/components/gallery/gallery.component.html
@@ -31,6 +31,7 @@
   [counter]="counter"
   [counterOrientation]="counterOrientation"
   [visibleItems]="visibleItems"
+  [moveByItems]="moveByItems"
   [objectFit]="objectFit"
   [loading]="loading"
   [itemTemplate]="itemTemplate"

diff --git a/libs/gallery/src/lib/components/gallery/gallery.component.ts b/libs/gallery/src/lib/components/gallery/gallery.component.ts
@@ -48,6 +48,7 @@ export class GalleryComponent {
   @Input() counter = true;
   @Input() counterOrientation: VerticalOrientation = 'bottom';
   @Input() visibleItems = 1;
+  @Input() moveByItems = 1;
   @Input() loading: Loading = 'lazy';
   @Input() loop = false;
   @Input() objectFit: ObjectFit = 'cover';

diff --git a/libs/gallery/src/lib/components/viewer/viewer.component.html b/libs/gallery/src/lib/components/viewer/viewer.component.html
@@ -3,7 +3,7 @@
   aria-label="Previous image"
   class="viewer-arrow viewer-arrow-prev"
   (mousedown)="$event.stopPropagation()"
-  (click)="selectByDelta(-1)"
+  (click)="selectByDelta(-moveByItems)"
 >
   <chevron-icon *ngIf="!arrowTemplate; else arrowTemplate"></chevron-icon>
 </button>
@@ -107,15 +107,15 @@
   aria-label="Next image"
   class="viewer-arrow viewer-arrow-next"
   (mousedown)="$event.stopPropagation()"
-  (click)="selectByDelta(1)"
+  (click)="selectByDelta(moveByItems)"
 >
   <chevron-icon *ngIf="!arrowTemplate; else arrowTemplate"></chevron-icon>
 </button>
 
 <counter
   *ngIf="counter && items?.length"
   [itemQuantity]="items?.length"
-  [selectedIndex]="selectedIndex"
+  [selectedIndex]="counterIndex"
   [orientation]="counterOrientation"
 ></counter>
 

diff --git a/libs/gallery/src/lib/components/viewer/viewer.component.ts b/libs/gallery/src/lib/components/viewer/viewer.component.ts
@@ -86,6 +86,7 @@ export class ViewerComponent implements OnChanges, OnInit, AfterViewInit {
   @Input() aria: Aria;
   @Input() loop: boolean;
   @Input() visibleItems: number;
+  @Input() moveByItems: number;
 
   @HostBinding('class.rtl')
   @Input()
@@ -111,6 +112,10 @@ export class ViewerComponent implements OnChanges, OnInit, AfterViewInit {
       : '400ms';
   }
 
+  get counterIndex() {
+    return Math.floor(this.selectedIndex / this.moveByItems);
+  }
+
   get showArrow() {
     return this.arrows && this.items && this.items.length > 1;
   }