文章/答案/技术大牛

发布

社区首页 >问答首页 >使用swiper SSR失败

问使用swiper SSR失败
EN

Stack Overflow用户

提问于 2022-03-28 10:54:33

回答 2查看 1.2K关注 0票数 4

我试图在SSR中使用swiper (6.8.4)，但是使用CSS构建会产生以下问题：

ReferenceError:文档未定义

没有滑动CSS，构建成功，但没有任何一个滑动功能是有效的.

这是我的代码：

import React from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'
import SwiperCore, { Navigation, Pagination, Mousewheel, Keyboard, Autoplay, Virtual, A11y } from 'swiper'

// swiper bundle styles
import 'swiper/swiper-bundle.min.css'

// swiper core styles
import 'swiper/swiper.min.css'

// modules styles
import 'swiper/components/navigation/navigation.min.css'
import 'swiper/components/pagination/pagination.min.css'

// install Swiper modules
SwiperCore.use([Navigation, Pagination, Mousewheel, Keyboard, Autoplay, Virtual, A11y])

const Carousel = ({ data, renderSlide }) => {
    return (
    <Swiper
      mousewheel
      keyboard
      className="mySwiper"
      slidesPerColumnFill="row"
      touchStartPreventDefault={false}
      watchOverflow
    >
      <div className="swiper-container">
        <SwiperSlide>
          <img src="https://www.imperial-library.info/sites/default/files/Fonts_Alphabets_Magic_Script.png" />{" "}
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://www.imperial-library.info/sites/default/files/Fonts_Alphabets_Magic_Script.png" />{" "}
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://www.imperial-library.info/sites/default/files/Fonts_Alphabets_Magic_Script.png" />{" "}
        </SwiperSlide>
      </div>
    </Swiper>
    )
}

export default Carousel

reactjs

server-side-rendering

swiper.js

回答 2

Stack Overflow用户

发布于 2022-04-06 14:47:55

    // Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/css';

export default () => {
  return (
    <Swiper
      spaceBetween={50}
      slidesPerView={3}
      onSlideChange={() => console.log('slide change')}
      onSwiper={(swiper) => console.log(swiper)}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      ...
    </Swiper>
  );
};

你需要像这样使用..。

参考链接：https://swiperjs.com/react#installation

票数 0

Stack Overflow用户

发布于 2022-04-07 07:13:19

将您的刷卡版本更新为"swiper": "^7.4.1"，然后使用以下代码。

import React from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'
import SwiperCore, { Navigation, Pagination, Mousewheel, Keyboard, Autoplay, Virtual, A11y } from 'swiper'

// swiper bundle styles
import 'swiper/swiper-bundle.min.css'

// swiper core styles
import 'swiper/swiper.min.css'

// modules styles
import 'swiper/components/navigation/navigation.min.css'
import 'swiper/components/pagination/pagination.min.css'

// install Swiper modules
SwiperCore.use([Navigation, Pagination, Mousewheel, Keyboard, Autoplay, Virtual, A11y])

const Carousel = ({ data, renderSlide }) => {
    return (
    <Swiper
      mousewheel
      keyboard
      className="mySwiper"
      slidesPerColumnFill="row"
      touchStartPreventDefault={false}
      watchOverflow
    >
        <SwiperSlide>
          <img src="https://www.imperial-library.info/sites/default/files/Fonts_Alphabets_Magic_Script.png" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://www.imperial-library.info/sites/default/files/Fonts_Alphabets_Magic_Script.png" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://www.imperial-library.info/sites/default/files/Fonts_Alphabets_Magic_Script.png" />
        </SwiperSlide>
    </Swiper>
    )
}

export default Carousel

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71646299

复制

相似问题

问使用swiper SSR失败
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用swiper SSR失败EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用swiper SSR失败
EN