<ion-slides class="main-slide" pager=true loop="true" #mainSlider [options]="mainSliderOpts"> <ion-slide class="change-display" *ngFor="let product of products;"> <div class="item-container"> <div class="strike-title">Strike Price</div><div class="devider"></div><p class="description">To at least what price do you think the stock will move from its current price if<strong>${{product.price}}</strong>? </p><div class="lose" [ngClass]="{'profit': product.profit > 0,'lose': product.profit < 0}"><span *ngIf="product.profit > 0">+</span>{{product.profit}}% </div><div class="price-contract">PRICE PER CONTRACT: <strong>${{product.contractPrice}}</strong> </div><ion-button class="next-btn" (click)=priceSliderChanged() expand="full" color="dark">Change Values</ion-button></div></ion-slide></ion-slides>

import{Component, ViewChild}from '@angular/core';import{IonSlides}from '@ionic/angular';@Component({selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'],})export class HomePage{@ViewChild('priceSlider') priceSlider: IonSlides; @ViewChild('mainSlider') mainSlider: IonSlides; products: any=[]; priceSliderOpts={slidesPerView: 2}; mainSliderOpts={effect: 'flip', slidesPerView: 1, lockSwipeToNext: true, loop: true, onInit: (slides: any)=>{alert("Init!!");}}; ionViewDidEnter(){//lock manual swipe for main slider this.mainSlider.lockSwipeToNext(true); this.mainSlider.lockSwipeToPrev(true);}prices: number[]=[ 297.50, 295.00, 292.75, 290.75]; next(){this.mainSlider.lockSwipeToNext(false); this.mainSlider.slideNext(); this.mainSlider.lockSwipeToNext(true);}randomIntFromInterval(min, max){return Math.floor(Math.random() * (max - min + 1) + min);}constructor(){this.products=[{title: 'NFLX', price: 313.2, prices: [ 297.50, 295.00, 292.75, 290.75], profit: 4, contractPrice: 400 //defalt price},{title: 'NFLX 1', price: 413.2, prices: [ 297.50, 295.00, 292.75, 290.75], profit: -6.6, contractPrice: 500 //defalt price},{title: 'NFLX 2', price: 213.2, prices: [ 297.50, 295.00, 292.75, 290.75], profit: -7, contractPrice: 300 //defalt price}]}priceSliderChanged(){this.mainSlider.getActiveIndex().then((index)=>{var activeProduct=this.products[index]; activeProduct.profit=this.randomIntFromInterval(-5, 6); activeProduct.contractPrice=this.randomIntFromInterval(350, 460); //setTimeout(()=>{this.mainSlider.update().then((d: any)=>{// alert(d);});});}}