如何在React应用程序中添加分页到滑动轮播?

Question

我使用"swiper"; "在React应用中创建carousel。一切都在工作，除了分页-它不显示在页面上。你看我做错了什么吗?

滑动分页API文档

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

Answer 1

我想分享的是，我们必须知道如何将Swiper导入到我们的React应用程序中。

在我的例子中，我最终将Swiper版本更改为" Swiper "; "8.1.4"。然后导入:

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

它开始工作了

Swiper NPM包现在是一个纯ESM包。这意味着它不再具有CommonJS模块(具有require()和module的模块)。exports语法)，并且只包含本地ES模块。如果你的打包器/工具/环境不支持Node ES模块，你应该更新它或者继续使用Swiper 6。

Answer 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类上使用SwiperCore.use()方法安装:

SwiperCore.use([Navigation, Pagination]);
const App = () => {
return (
<Swiper
slidesPerView={"auto"}
pagination={{
clickable: true,
}}
navigation={true}
className="mySwiper"
> ...