如何在 React 应用程序中将分页添加到 Swiper 轮播？答案

【问题标题】：How to add Pagination to Swiper carousel in a React app?如何在 React 应用程序中将分页添加到 Swiper 轮播？
【发布时间】：2022-07-07 19:47:10
【问题描述】：

我在 React 应用程序中使用 "swiper": "6.8.4" 并创建轮播。一切正常，除了分页 - 它没有出现在页面上。你看到我做错了什么吗？

swiper pagination api docs

...
function Carousel() {
  return (
      <Swiper
        
        modules={[EffectFade, Keyboard, Pagination, Autoplay]}
        pagination={{
          el: '.swiper-pagination',
          type: 'bullets',
        }}

        effect={'fade'}
        fadeEffect={{crossFade: true}}
        freeMode={true}
        autoplay={{
          delay: 2500,
          disableOnInteraction: false,
        }}
        keyboard={{
          enabled: true,
          onlyInViewport: true,
          onPageUp: true,
        }}
        className="mySwiper"
        cssMode={true}
        loop={false}
        mousewheel={true}
        slidesPerView={1}
      >
        <SwiperSlide>0</SwiperSlide>
        <SwiperSlide>1</SwiperSlide>
      </Swiper>
  )
}

export default Carousel

【问题讨论】：

标签： javascript reactjs swiper

【解决方案1】：

我想分享的是，我们必须了解如何将 Swiper 导入我们的 React 应用程序。

就我而言，我最终将 Swiper 版本更改为“swiper”：“8.1.4”。然后我像这样导入它：

import {Swiper, SwiperSlide} from 'swiper/react/swiper-react'

它开始工作了。

Swiper NPM package is now a pure ESM package。这意味着它不再具有 CommonJS 模块（具有 require() 和 module.exports 语法的模块）并且仅包含本机 ES 模块。如果您的捆绑器/工具/环境不支持 Node ES 模块，您应该更新它或继续使用 Swiper 6。

【讨论】：

【解决方案2】：

如果您仍想使用 Swiper 6，请以这种方式导入：

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

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

// swiper modules you want to use
import SwiperCore, { Navigation, Pagination } from 'swiper';

需要在 Swiper 类上使用 Swiper.use() 方法安装模块：

SwiperCore.use([Navigation, Pagination]);

const App = () => {
  return (
      <Swiper
        slidesPerView={"auto"}
        pagination={true}
        navigation={true}
        className="mySwiper"
      > ...

【讨论】：