2

我正在使用 REACT 版本的 swiper。当您加载页面时，它一切正常。这就是我编码的方式：

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;

现在该错误仅在特定情况下发生。首先，我使用https://vercel.com/使用服务器端渲染。当您进入登录页面：https ://bouclesandwaves-p67ctnmpb.vercel.app/login 并登录时，您可以使用测试帐户：test@test.com 密码：test

然后它重定向到主页，然后就很好了。然后你注销（按右上角的用户图标 -> 注销），然后使用凭据再次登录，然后图像会很大（注意幻灯片上的样式宽度）：

<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>

这些是我已经在 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;
    }
  }
}

我已经尝试过不同的样式（比如包装或幻灯片或图像等的最大宽度，但这并不能解决问题）

请注意，当我在本地运行项目时，我没有任何问题，因此我认为它必须与服务器端渲染有关。

对此我能做些什么吗？为什么它在第二次（而不是第一次）重定向之后发生？另外，如果我只是使用菜单栏更改页面，那么根本没有问题

4

0 回答 0