react [email protected] 工作中遇到的问题处理

react [email protected] 问题处理

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

1、react [email protected]的使用方法:

(1)安装:

复制代码
	npm install [email protected]

(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 [email protected]配置自动轮播,且开启移入停止的配置

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


``
相关推荐
前端大白话1 分钟前
救命!这10个Vue3技巧藏太深了!性能翻倍+摸鱼神器全揭秘
前端·javascript·vue.js
嘻嘻嘻嘻嘻嘻ys3 分钟前
《Vue 3全栈架构实战:Vite工程化、Pinia状态管理与Nuxt 3深度解析》
前端·后端
前端大白话4 分钟前
前端人必看!10个JavaScript“救命”技巧,让你告别加班改Bug
前端·javascript·程序员
cg501715 分钟前
Vue回调函数中的this
前端·javascript·vue.js
前端太佬16 分钟前
从零到一实现扫码登录:一个前端菜鸟的踩坑实录
前端·javascript·架构
yuanmenglxb200427 分钟前
微信小程序核心技术栈
前端·javascript·vue.js·笔记·微信小程序·小程序
爱编程的鱼28 分钟前
如何让 HTML 文件嵌入另一个 HTML 文件:详解与实践
前端·html
_092732 分钟前
Vue 2 与 Vue 3 的核心区别及 Vue 3 新特性详解
前端
David凉宸33 分钟前
一文带你使用Vue完成移动端(apk)项目
前端
会飞的鱼先生1 小时前
Vue3的内置组件 -实现过渡动画 TransitionGroup
前端·javascript·vue.js·vue