hi,
I’m working on ionic 4 app and i needed to add a horizontal slider to the page. slider is added. But my question is slides are not locking at the last slide.
here is my code
html :
<div style="float: left; width: 100%">
<ion-slides [options]="sliderConfig" style="width: 100%" #slides>
<ion-slide style=" margin-left: -30%">
<div style="float:left">
<!-- <ion-card style="width: 180px; height: 200px;" >
<ion-card-content> -->
<ion-avatar style="height: 110px;width: 110px" align="center">
<img src="../../../assets/f1.jpg" style="width: 100%; height:100%" />
</ion-avatar>
<!-- <img src="../../../assets/food.jpg" style="width:220px; height:200px"/> -->
<ion-label>
Promo
</ion-label>
<!-- </ion-card-content>
</ion-card>
-->
</div>
</ion-slide>
<ion-slide style="margin-left: -20%">
<div style="float:left">
<ion-avatar style="height: 110px;width: 110px" align="center">
<img src="../../../assets/food.jpg" style="width: 100%; height:100%" />
</ion-avatar>
<ion-label>
New
</ion-label>
</div>
</ion-slide>
<ion-slide style="width:100%; margin-left: -20%">
<div style="float:left">
<ion-avatar style="height: 110px;width: 110px" align="center">
<img src="../../../assets/sri.jpg" style="width:100%; height:100%" />
</ion-avatar>
<ion-label>
Sri Lankan
</ion-label>
</div>
</ion-slide>
<ion-slide style="width:100%; margin-left: -20%">
<div style="float:left">
<ion-avatar style="height: 110px;width: 110px" align="center">
<img src="../../../assets/jpnse.jpg" style="width:100%; height:100%" />
</ion-avatar>
<ion-label>
Japanese
</ion-label>
</div>
</ion-slide>
<ion-slide style="width:100%; margin-left: -20%">
<div style="float:left">
<ion-avatar style="height: 110px;width: 110px" align="center">
<img src="../../../assets/indian.jpg" style="width:100%; height:100%" />
</ion-avatar>
<ion-label>
Indian
</ion-label>
</div>
</ion-slide>
<ion-slide style="width:100%; margin-left: -20%" class="last">
<div style="float:left">
<ion-avatar style="height: 110px;width: 110px" align="center">
<img src="../../../assets/chin.jpg" style="width:100%; height:100%" />
</ion-avatar>
<ion-label>
Chinese
</ion-label>
</div>
</ion-slide>
</ion-slides>
</div>
ts:
export class FoodPage implements OnInit {
@ViewChild(IonSlides) slides: IonSlides;
sliderConfig = {
//spaceBetween: 5,
centeredSlides: true,
slidesPerView: 1.7
}
constructor(private router: Router) {
}
ngOnInit() {
// this.slides.lockSwipeToNext(true);
}
}