CODEWITHSUNDEEP
angulartypescriptionic-frameworkswiper.js
R4yY
R4yY

Reputation: 132

Angular swiper slides don't snap

I am trying to implement the Swiper Angular library into my Angular 10/Ionic 5 project. The problem I'm having is that the slides don't snap and it seems like it's just one big page I can drag through.

This is the Getting Started example I have tried, it shows the pages right, I believe, but the swiping part seems a bit off, with no snapping and it doesn't keep sliding if you let go, like shown here.

<swiper class ="slide-pic-preview" [slidesPerView]="3" [spaceBetween]="50"
        (swiper)="onSwiper($event)" (slideChange)="onSlideChange()"
        [navigation]="true" [pagination]="{ clickable: true }">

  <ng-template swiperSlide>Slide 1</ng-template>
  <ng-template swiperSlide>Slide 2</ng-template>
  <ng-template swiperSlide>Slide 3</ng-template>
  <ng-template swiperSlide>Slide 4</ng-template>
  <ng-template swiperSlide>Slide 5</ng-template>
  <ng-template swiperSlide>Slide 6</ng-template>
</swiper>

I have also installed all the components needed for the navigating part in the constructor:

constructor() {
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]); }

The naviagtion buttons also don't do anything than triggering the onSlideChange Event, so does normal swiping, but not with each page instead its like every 20px I drag it around the event gets fired.

And the style is imported in the modules scss file.

Update: I just found out that resizing the browser window fixes this problem, now I just need to find out how to intially make it work

Upvotes: 0

Views: 2011

Answers (2)

MadMac
MadMac

Reputation: 4841

This is @R4yYs answer but with a modification to stop the swiper index resetting. Otherwise this causes a reset of the slide index in Ionic/ angular back to 0 if you go to another page/tab.

 @ViewChild('swiper') swiper: Swiper;
  hasRunContentCheck = false;

  ngAfterContentChecked(): void {
    if (this.swiper && !this.hasRunContentCheck) {
      this.hasRunContentCheck = true;
      this.swiper.updateSwiper({});
    }
  }

Upvotes: 3

R4yY
R4yY

Reputation: 132

So I found the solution on my own:

@ViewChild('swiper') swiper: Swiper;  

  ngAfterContentChecked(): void
  {
    if(this.swiper){
      // @ts-ignore
      //This really works, trust me
      this.swiper.updateSwiper({});
    }
  }

Updating the swiper once it comes into the view of the user fixes this issue.

Upvotes: 2

Related Questions