Swiper only works when resizing page - using NextJS (so SSR)

[hillbilly991]

• Swiper Version: 6.5.0.
• Platform/Target and Browser Versions: Mac OS Big Sur, Chrome, NextJS

What You Did

I've added a Swiper with slidesPerView={'auto'} but and freeMode={true} but it doesn't work unless I resize the screen. I'm using SSR (NextJS). Maybe this is related to the issue

https://codesandbox.io/s/wonderful-dirac-vlpiq?file=/src/App.js (it works ok on the sandbox)

If StackBlitz is not suitable for reproduction of your issue, please create a minimal GitHub repository with the reproduction of the issue. A good way to make a minimal reproduction is to create a new app via ng new repro-app and add the minimum possible code to show the problem. Share the link to the repo below along with step-by-step instructions to reproduce the problem, as well as expected and actual behavior.

Issues that don't have enough info and can't be reproduced will be closed.

-->

Expected Behavior

It is expected to look how it is in the sandbox (allow you to swiper freely to the next slide)

Actual Behavior

what happens is I try to swipe and the slide moves slightly but then goes straight back to the beginning. I cannot move to another slide

[rickthepick]

Have you seen this? https://github.com/nolimits4web/swiper/issues/2958

[Developeranees]

same issue

[B-l-u-e-b-e-r-r-y]

I refer to this issue and solve the problem. Using observer parameter:

<Swiper
  observer={true}
  spaceBetween={10}
  slidesPerView={5}
  slidesPerGroup={5} >

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ryanfigueiredo]

Hello guys, i have a similar problem here. My problem is: Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'swiper' This message only show in when i use getServerSideProps with nextjs. Someone help me please?

[hillbilly991]

Can you share your code and what versions you're using?

Might be able to help as I fixed this issue

On Sun, 13 Mar 2022, 23:09 César Ryan, @.***> wrote:

Hello guys, i have a similar problem here. My problem is: Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'swiper' This message only show in when i use getServerSideProps with nextjs. Someone help me please?

— Reply to this email directly, view it on GitHub https://github.com/nolimits4web/swiper/issues/4452#issuecomment-1066202062, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALH7MUT7QIB7IB6FGPWQVZLU7ZYTBANCNFSM43EOTMVQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you authored the thread.Message ID: @.***>

[ryanfigueiredo]

Can you share your code and what versions you're using? Might be able to help as I fixed this issue … On Sun, 13 Mar 2022, 23:09 César Ryan, @.> wrote: Hello guys, i have a similar problem here. My problem is: Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'swiper' This message only show in when i use getServerSideProps with nextjs. Someone help me please? — Reply to this email directly, view it on GitHub <#4452 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALH7MUT7QIB7IB6FGPWQVZLU7ZYTBANCNFSM43EOTMVQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub. You are receiving this because you authored the thread.Message ID: @.>

Oh my friends, i'm completely embarrassed with this situation, because my problem was that i haved installed swiper in devDependencies and no in dependencies.

[hillbilly991]

Good to hear that it's fixed 👍

On Mon, 14 Mar 2022, 01:28 César Ryan, @.***> wrote:

Can you share your code and what versions you're using? Might be able to help as I fixed this issue … <#m_679879902011592478_> On Sun, 13 Mar 2022, 23:09 César Ryan, @.> wrote: Hello guys, i have a similar problem here. My problem is: Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'swiper' This message only show in when i use getServerSideProps with nextjs. Someone help me please? — Reply to this email directly, view it on GitHub <#4452 (comment) https://github.com/nolimits4web/swiper/issues/4452#issuecomment-1066202062>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALH7MUT7QIB7IB6FGPWQVZLU7ZYTBANCNFSM43EOTMVQ https://github.com/notifications/unsubscribe-auth/ALH7MUT7QIB7IB6FGPWQVZLU7ZYTBANCNFSM43EOTMVQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub. You are receiving this because you authored the thread.Message ID: @.>

Oh my friends, i'm completely embarrassed with this situation, because my problem was that i haved installed swiper in devDependencies and no in dependencies.

— Reply to this email directly, view it on GitHub https://github.com/nolimits4web/swiper/issues/4452#issuecomment-1066245740, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALH7MUUHZXCU2MHTHFK66LDU72I2TANCNFSM43EOTMVQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you authored the thread.Message ID: @.***>

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[aditi-gawli]

even after adding observeParents={true} and observer={true} not it doesn't work earlier with resizing css class of swiper were getting added but now nothing works

[aditi-gawli]

swiper-pagination - div has only this class instead of this swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal when I resize window the issue get's resolved but after adding observer={true} now on resizing window nothing changes to css it remains this - swiper-pagination

[nolimits4web]

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

[mahdi-hejazi]

for me this work:

i use slides-per-view="auto" and add w-50 to

for using auto in slidesPerView , we must add sizes in CSS to slides

` <swiper-container free-mode="true" slides-per-view="auto" space-between="14" loop="true" autoplay-delay="3000" navigation-next-el=".swiper-button-next" navigation-prev-el=".swiper-button-prev"

                                  class=" p-px">
                    <swiper-slide v-for="(item , index) in productSlider1.items" :key="index" class="w-50">
                        <div
                            class="border-gradient group relative rounded-base p-px before:absolute before:-inset-px before:h-[calc(100%+2px)] before:w-[calc(100%+2px)] before:rounded-base  "
                        > `