Im using swiper to create a sliding array of number when user can scroll to select his weight. Swiper has [loop]="true" My problem is that once user has reached the limit in my case slider 7 and move to slider 1 the index does not restart to index 0 also if i scroll backwards from slide 1 to 7 i do not have the index updated in my case equal to 6. To have the correct index is very important bacause based on it i update the selected value.
How can I achieve the following goal/intention?
Here is my actual code :
Here is my component.html
<ion-row>
<ion-col size="10">
<swiper-container
#slides
[options]="sliderOptionsOpts"
[modules]="swiperModules"
(swiperslidechange)="checkRangeSlide($event)"
[loop]="true"
style="height: 200px"
>
<swiper-slide *ngFor="let option of sliderOptions">
<span
[ngClass]="option === sliderSelected ? 'fw-bold' : 'text-muted'"
class="fs-1"
>{{ option }}</span
>
</swiper-slide>
</swiper-container>
</ion-col>
Here is my component.ts
sliderOptions: number[] = [];
sliderOptionsOpts: any;
sliderSelected: number = 1;
checkMinMaxRange(max: number, min: number) {
console.log("max min", max, min);
const dataArray = this.createArrayFromRange(1, 7);
this.sliderOptions = dataArray;
this.sliderOptionsOpts = {
slidesPerView: 1,
centeredSlides: true,
reverseDirection: true,
initialSlide: this.sliderOptions.indexOf(this.sliderSelected),
loop: true,
};
}
createArrayFromRange(min: number, max: number): number[] {
const length = max - min + 1;
return Array.from({ length }, (_, index) => index + min);
}
checkRangeSlide(event: any) {
let activeIndex = event.detail[0].realIndex;
const selectedValue = this.sliderOptions[activeIndex];
const answerObject = {
selectedValue: selectedValue + 1,
activeIndex: activeIndex,
object: event.detail[0],
};
console.log("ANSWER:", answerObject);
}
