fix: use carousel select method to set active slide (#508)

Closes #507
intershop · Jan 26, 2021 · 2302a53 · 2302a53
1 parent 1f45118
commit 2302a53
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/src/app/pages/product/product-images/product-images.component.html b/src/app/pages/product/product-images/product-images.component.html
@@ -22,6 +22,7 @@
   <div class="col-12 col-lg-9 product-detail-img clearfix">
     <div class="product-image-container">
       <ngb-carousel
+        #carousel
         [activeId]="activeSlide"
         (slide)="setActiveSlide($event.current)"
         [showNavigationArrows]="getImageViewIDsExcludePrimary(product, 'L').length > 0"

diff --git a/src/app/pages/product/product-images/product-images.component.ts b/src/app/pages/product/product-images/product-images.component.ts
@@ -1,4 +1,5 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, ViewChild } from '@angular/core';
+import { NgbCarousel } from '@ng-bootstrap/ng-bootstrap';
 
 import { Product, ProductHelper } from 'ish-core/models/product/product.model';
 
@@ -22,6 +23,8 @@ export class ProductImagesComponent {
    */
   @Input() product: Product;
 
+  @ViewChild('carousel') carousel: NgbCarousel;
+
   activeSlide = '0';
 
   getImageViewIDsExcludePrimary = ProductHelper.getImageViewIDsExcludePrimary;
@@ -32,6 +35,8 @@ export class ProductImagesComponent {
    */
   setActiveSlide(slideIndex: number | string) {
     this.activeSlide = slideIndex?.toString();
+
+    this.carousel.select(this.activeSlide);
   }
 
   /**