4

I'm using REACT version of swiper. When you load the page it all works perfectly. This is how i coded it:

import React from 'react';
import SwiperCore, {Navigation, Pagination, A11y, Autoplay} from 'swiper';
import {Swiper, SwiperSlide} from "swiper/react";

import styles from './Slideshow.module.scss';

SwiperCore.use([Navigation, Pagination, A11y, Autoplay]);
const Slideshow = ({images = [], intervalMs = 1000}) => {
    return <div className={styles.slideshow}>
        <Swiper
            slidesPerView={1}
            navigation
            pagination={{clickable: true}}
            loop
            autoplay={{delay: intervalMs}}
        >
            {
                images.map(src => <SwiperSlide key={src}><img className={'banner-img'} src={src}
                                                              alt={'banner'}/></SwiperSlide>)
            }
        </Swiper>
    </div>;
};

export default Slideshow;

Now the bug only happens in a particular case. First of all I am using server-side rendering using https://vercel.com/. When you go to the login page: https://bouclesandwaves-p67ctnmpb.vercel.app/login and login, you can use test account: test@test.com password: test

Then it redirects to the home page, then it is perfectly fine. Then you log out (press user icon in right upper corner -> log out) and then log in again with the credentials, then the images will be huge (note the style widths that have been put on the slides):

<div class="swiper-wrapper" id="swiper-wrapper-fb9fb52f2fefd337" aria-live="off"
     style="transform: translate3d(-45672px, 0px, 0px); transition: all 0ms ease 0s;">
    <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="5" role="group" aria-label="1 / 8"
         style="width: 15224px;"><img class="banner-img" src="/images/home/slides/slide6.png" alt="banner"></div>
    <div class="swiper-slide" data-swiper-slide-index="0" role="group" aria-label="2 / 8" style="width: 15224px;"><img
            class="banner-img" src="/images/home/slides/slide1.png" alt="banner"></div>
    <div class="swiper-slide swiper-slide-prev" data-swiper-slide-index="1" role="group" aria-label="3 / 8"
         style="width: 15224px;"><img class="banner-img" src="/images/home/slides/slide2.jpg" alt="banner"></div>
    <div class="swiper-slide swiper-slide-active" data-swiper-slide-index="2" role="group" aria-label="4 / 8"
         style="width: 15224px;"><img class="banner-img" src="/images/home/slides/slide3.png" alt="banner"></div>
    <div class="swiper-slide swiper-slide-next" data-swiper-slide-index="3" role="group" aria-label="5 / 8"
         style="width: 15224px;"><img class="banner-img" src="/images/home/slides/slide4.png" alt="banner"></div>
    <div class="swiper-slide" data-swiper-slide-index="4" role="group" aria-label="6 / 8" style="width: 15224px;"><img
            class="banner-img" src="/images/home/slides/slide5.jpg" alt="banner"></div>
    <div class="swiper-slide" data-swiper-slide-index="5" role="group" aria-label="7 / 8" style="width: 15224px;"><img
            class="banner-img" src="/images/home/slides/slide6.png" alt="banner"></div>
    <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="0" role="group" aria-label="8 / 8"
         style="width: 15224px;"><img class="banner-img" src="/images/home/slides/slide1.png" alt="banner"></div>
</div>

These are the extra styles I already put on the swiper:

.swiper-container {
  width: 100%;
  height: auto;
  max-height: 100%;
  .swiper-wrapper {
    align-items: center;
    img {
      width: 100%;
    }

    .swiper-slide {
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
  }
}

I already tried with different styling (like max widths on the wrapper or slides or images etc but this doesn't fix the issue)

Note that when I run the project locally, then I dont have any issue, so I think it has to do something with the server-side rendering.

Is there anything I can do about this? Why is it happening after a redirect the second time (and not the first time)? Also if i just change pages using the menu bar then there is no issue at all

Enforcerke
  • 75
  • 5
  • you need to add styling to your slider. It worked for me. https://stackoverflow.com/questions/69225146/swiperjs-styling-does-not-work-with-nextjs – Oleh Polevych Dec 27 '22 at 15:19

0 Answers0