swiper

swiper copied to clipboard

First of all, thank you for this awesome library! 💯

I found an issue when using the React version together with Next.js and Server-Side Rendering. I've build a reproduction app here: https://github.com/hauptrolle/swiper-ssr-bug Just follow the instruction in the README.

Expected Behavior

Slider should be centered and spacings are correct.

Actual Behavior

Slider items are all left aligned (with no spacing(spaceBetween setting)), and chevrons are visible for a short amount of time.

Got your repo, started, can not see anything flickering:

https://user-images.githubusercontent.com/999588/110795651-23a34d80-8288-11eb-944c-aaf28446e1db.mov

Hey @nolimits4web, did u really used the production mode? yarn build && yarn start? I attached a video:

https://user-images.githubusercontent.com/1164541/110800181-3ca60180-827c-11eb-9dcf-8ed99f9b8bf1.mov

@nolimits4web Will you take another look at that problem?

I also have this problem

Same issue, and it's hard to fix.

Do you update the swiper in client side？

Here's a live demo of I fixed this issue: https://crypto.com/price

spaceBetween seem to be applied on the client side only which lead to the flicker. If you manually add the margin on the .swiper-slide class on the server-side, the alignment is broken when you change slide.

spaceBetween seem to be applied on the client side only which lead to the flicker. If you manually add the margin on the .swiper-slide class on the server-side, the alignment is broken when you change slide.

I'm having this same issue, has anyone figured out a workaround?

Any updates? I'm having same issue Swiper ignores spaceBetween in SSR

For anyone still having this issue, this is how I worked around the spaceBetween being ignored:

const Slide = ({ children, ...props }: SwiperSlideProps) => {
    const {
        originalParams: { spaceBetween },
    } = useSwiper();

    return (
        <SwiperSlide style={{ marginRight: spaceBetween ? `${spaceBetween}px` : undefined }} {...props}>
            {children}
        </SwiperSlide>
    );
};

Slide.displayName = SwiperSlide.displayName; // Important!

This issue is not limited to Next.js. You should face this problem with any SSR integration regardless of the library/framework. It is caused by applying the margin-right on the slides only on the client side. Applying the style attribute already on the server conflicts with the "breakpoints" option, as you can't include media queries in the style attribute. So you could either delay the rendering until the DOM Elements are available but then face the performance and UX implications or you need to create the CSS containing the media queries with the margin-right on the server and inject it as an inline style, but that seems like a lot of overhead and complexity. I currently work around this issue by not using the "spaceBetween" param and just applying a padding-right on the swiper-slide elements via css (requires box-sizing: border-box), but this conflicts when only showing 1 slide per view. When the "spaceBetween" doesn't change in "breakpoints" you can either apply the margin-right on the swiper-slide component, like the solution above by @Mitch528 or apply it in addition to the "spaceBetween" prop via css.

@nolimits4web do you have an idea how to properly solve this issue without breaking support for the "breakpoints" param?

This issue was caused by Next/Font i believe, im not sure where but I never had this issue until i imported @next/font and tried updating the font brought in from this.

Facing the same issue on the latest version ^10.2.0 😞 Anyone found any workaround?

Issue is closed because of outdated/irrelevant/not actual/needed more information/inactivity.

If this issue is still actual and reproducible for latest version of Swiper, please create new issue and fill the issue template correctly:

• Clearly describe the issue including steps to reproduce when it is a bug.
• Make sure you fill in the earliest version that you know has the issue.
• Provide live link or JSFiddle/Codepen or website with issue