Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Next.js swiper doesn't reinitialize within page navigation that contains slider #6781

Closed
1 task done
dinonondi opened this issue Jun 24, 2023 · 0 comments
Closed
1 task done
Labels

Comments

@dinonondi
Copy link

Check that this is really a bug

  • I confirm

Reproduction link

No possible link

Bug description

I have a slider on each of my project pages.
When I navigate from one project to another via my menu, the swiper doesn't re-init on load, and if I was already on slide 2, it shows the slide 2 of the next project, instead of the slide 1. If I go to another page between each project (project 1 > info > project 2), the issue disappears.

I'm using this code:

let mySwiper;
   useEffect(() => {

      const enableSwiper = function() {
            console.log("init slider");
            const swiperEl = document.querySelector('swiper-container');
            const swiperParams = {
              slidesPerView: 1,
              observer: true, 
              observeParents: true,
              effect: "fade",
              allowTouchMove: false,
              keyboard: {
                enabled: true,
              },
              speed: 0,
              lazyPreloadPrevNext:1,
              navigation: {
                nextEl: '.swiper-button-next-o',
                prevEl: '.swiper-button-prev-o',
              },
              pagination: {
                el: '.swiper-paginatio',
                type: "fraction",
              },

            };

            Object.assign(swiperEl, swiperParams);
            swiperEl.initialize();



      }; 


      if ( !isMobile ) {
        return enableSwiper();
      }
      else{
        if ( mySwiper !== undefined ) mySwiper.destroy( true, true );
        return;
      } 

   }, [isMobile])```
   
   and
   
 <swiper-container init="false" ref={swiperElRef}>
            <SliceZone slices={page.data.slices} isMobile={isMobile} components={components} /> 
        </swiper-container> 

### Expected Behavior

Slider should re-init on page change

### Actual Behavior

The slider is not reinit

### Swiper version

9.3.2

### Platform/Target and Browser Versions

MacOS Chrome

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] Make sure this is a Swiper issue and not a framework-specific issue

### Would you like to open a PR for this bug?

- [ ] I'm willing to open a PR
Repository owner locked and limited conversation to collaborators Jun 24, 2023
@nolimits4web nolimits4web converted this issue into discussion #6782 Jun 24, 2023

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
Projects
None yet
Development

No branches or pull requests

1 participant