react swiper@6.x 工作中遇到的问题处理

react swiper@6.x 问题处理

由于这个版本比较低,所以网上直接搜到的swiper的使用方法都不适用此版本,故对我工作中遇到的此版本问题做一总结,愿遇到同样问题的朋友少走远路:

1、react swiper@6.x的使用方法:

(1)安装:

复制代码
	npm install swiper@6.8.4

(2)使用

bash 复制代码
	import { Swiper, SwiperSlide } from 'swiper/react';
	import 'swiper/swiper-bundle.css';
	import SwiperCore, { Autoplay, Navigation, Pagination, A11y } from 'swiper';
	SwiperCore.use([Autoplay, Navigation, Pagination, A11y]);

	<Swiper
        // 你可以通过autoplay的其他选项来控制自动播放的行为
        autoplay={{
          delay: 5000,
          disableOnInteraction: false,
          pauseOnMouseEnter: true,
        }}
        allowTouchMove={true}
        loop={true}
        // 自定义前进后退按钮的图标
        navigation={{
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        }}
        // 在CSS中定义前进后退按钮的样式和图标
        className="my-swiper"
        pagination={{ clickable: true }}
        onSlideChange={() => console.log('slide change')}
        onSwiper={(swiper) => console.log(swiper)}>
        <SwiperSlide>
          <div style={{ height: 200 }}>Slide 1</div>
        </SwiperSlide>
        <SwiperSlide>
          <div style={{ height: 200 }}>Slide 2</div>
        </SwiperSlide>
        <SwiperSlide>
          <div style={{ height: 200 }}>Slide 3</div>
        </SwiperSlide>
        <SwiperSlide>
          <div style={{ height: 200 }}>Slide 4</div>
        </SwiperSlide>
        {/* 前进按钮 */}
        <div className="swiper-button-next" />
        {/* 后退按钮 */}
        <div className="swiper-button-prev" />
      </Swiper>

2、react swiper@6.x配置自动轮播,且开启移入停止的配置

bash 复制代码
 		autoplay={{
          delay: 5000,
          disableOnInteraction: false,
          // 鼠标移入停止自动播放
          pauseOnMouseEnter: true,
        }}


``
相关推荐
AverageJoe19919 分钟前
一次vite热更新不生效问题排查
前端·debug·vite
努力只为躺平11 分钟前
🔥 油猴脚本开发指南:从基础API到发布全流程
前端·javascript
bitbitDown13 分钟前
我用Playwright爬了掘金热榜,发现了这些有趣的秘密... 🕵️‍♂️
前端·javascript·vue.js
陈随易17 分钟前
VSCode v1.102发布,AI体验大幅提升
前端·后端·程序员
ma7721 分钟前
JavaScript 获取短链接原始地址的解决方案
前端
该用户已不存在21 分钟前
关于我把Mac Mini托管到机房,后续来了,还有更多玩法
服务器·前端·mac
tianchang25 分钟前
SSR 深度解析:从原理到实践的完整指南
前端·vue.js·设计模式
闲蛋小超人笑嘻嘻26 分钟前
前端面试十一之TS
前端
摆烂为不摆烂26 分钟前
😁深入JS(四): 一文让你完全了解Iterator+Generator 实现async await
前端
DoraBigHead39 分钟前
🧠 别急着传!大文件上传里,藏着 Promise 的高级用法
前端·javascript·面试