Ionic 4 ion slider lock

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);
   
  }
}