CODEWITHSUNDEEP
ionic2slide
Alexander Zakusilo
Alexander Zakusilo

Reputation: 1566

How to change dynamicaly slide in ion-slides on Ionic 2?

I have slider in my application:

<ion-slides #showSlider *ngIf="product.show_images" class="slideShowWrapper productImages" [options]="mySlideOptions">
      <ion-slide *ngFor="let image of product.show_images;">
        <img [src]="image.big_url" alt="{{image.title}}"/>
      </ion-slide>
    </ion-slides>

And in code I need to change slides and count of slides. But after change the list of slides. Slider changes, but first slide not shows, or it can be showed but points of slides is not anought. How right to change slides list? My code to change is:

this.slider.getSlider()['removeAllSlides'](); // Delete slides
this.product.changeOffer();
this.product.show_images = this.product.getImages();

Upvotes: 1

Views: 3117

Answers (1)

Alexander Zakusilo
Alexander Zakusilo

Reputation: 1566

Template:

<ion-slides #showSlider *ngIf="product.show_images" class="slideShowWrapper productImages" [options]="mySlideOptions">
   <ion-slide *ngFor="let image of product.show_images;">
     <img [src]="image.big_url" alt="{{image.title}}"/>
   </ion-slide>
</ion-slides>

Code:

export class ProductBlocksProductPage extends AbstractBlock{ 
   mySlideOptions: any

   @ViewChild('showSlider') slider: Slides; //Access to slider
   @Input() slideOptions = {}; // Slider options
   constructor(){

   }  



   /**
   * Change the images action
   */
  changeOffer()
  {
    this.product.changeOffer(); //Here is your function to change of our images array
    // Update slider
    this.slider.getSlider().update(); //Reinit slider
    this.slider.getSlider().slideTo(0, 0, true); //Move to first slider
  }
}

Upvotes: 2

Related Questions