CODEWITHSUNDEEP
angularserver-side-renderingangular-universalswiper.js
weenz
weenz

Reputation: 41

Does anyone have any experience using Swiper.js in Angular Unversal with SSR?

I am trying to implement a swiper. I have an app using Angular Universal. When I initially load my app, the swiper initializes, but there is one bug where it lets me swipe way too far left and right. It doesn't just snap back if i try to swipe too far.

When I navigate away from the page with the swiper and then back, the swiper works as expected. I am assuming this has something to do with the server-side rendering. Has anyone else encountered this problem?

this is my config:

var sortFilterSwiper = new Swiper("#sortSwiperMobile", {
spaceBetween: 0,
slidesPerView: 'auto',
centeredSlides: false

});

Like I said, it appears to work well in the browser app, but I am having trouble getting it to work on the server.

Upvotes: 1

Views: 2022

Answers (2)

satdevops88
satdevops88

Reputation: 9

I had the same error when using swiper with Angular Universal Server Side Rendering, I installed ngx-swiper-wrapper package and it worked fine without any error

reference package: https://www.npmjs.com/package/ngx-swiper-wrapper

Upvotes: 0

G. Modebadze
G. Modebadze

Reputation: 975

Same in my project but I've fixed like this:

import { EventReplayer } from 'preboot';


ngAfterViewInit(): void {
 if (isPlatformBrowser(this.platformId)) {
  this.swipeConfig = {
    direction: 'horizontal',
    initialSlide: 0,
    updateOnWindowResize: true,
    preloadImages: false
  };
  this.eventReplayer.replayAll();
  this.cd.markForCheck();
}

}

I hope this would help you.

Upvotes: 1

Related Questions