如何解决Raect中的Swiper js如何在MouseEnter上停止自动播放并在MouseLeave上启动它
我正在尝试通过构建一个具有自动播放功能的简单图像滑块来学习 swiper.js 的反应,但我不知道如何 停止自动播放 onMouseEnter 并启动它 onMouseLeave。 我试过 onMouseLeave={Swiper.autoplay.stop} 没有用。
import React from 'react';
import classes from './HeroSlider.module.css';
import { Swiper,SwiperSlide } from 'swiper/react';
import SwiperCore,{ Navigation,Pagination,Autoplay } from 'swiper';
import 'swiper/swiper-bundle.css'; // swiper.min.css
import image1 from '../../Images/image1.png';
import image2 from '../../Images/image2.png';
import image3 from '../../../Images/image3.png';
SwiperCore.use([ Navigation,Autoplay ]);
const HeroSlider = () => {
return (
<Swiper
className={ classes.MainSlider }
autoplay={{ delay: 5000,disableOnInteraction: false,reverseDirection: true,waitForTransition: true }}
pagination={{ clickable: true }}
navigation
onMouseEnter={}
onMouseLeave={}
>
<SwiperSlide className="full-w-h-container" tag="li" style={{ listStyle: "none" }}>
<img className={ `full-w-h-container ${ classes.ImgBg }` } src={image1} alt="image1" />
</SwiperSlide>
<SwiperSlide className="full-w-h-container" tag="li" style={{ listStyle: "none" }}>
<img className={ `full-w-h-container ${ classes.ImgBg }` } src={image2} alt="image2" />
</SwiperSlide>
<SwiperSlide className="full-w-h-container" tag="li" style={{ listStyle: "none" }}>
<img className={ `full-w-h-container ${ classes.ImgBg }` } src={image3} alt="image3" />
</SwiperSlide>
</Swiper>
)
}
export default HeroSlider;
编辑:
我尝试过类似的东西 onMouseEnter={() => Swiper.autoplay.stop()} onMouseLeave={() => Swiper.autoplay.start()} 但是如果我使用类似的东西,它不会奇怪地工作: onClick={() => Swiper.autoplay.stop()} 它有效...
解决方法
在撰写本文时,Swiper for React 似乎没有实现 onMouseEnter
、onMouseLeave
等。
为了解决这个问题,我将我的 Swiper 组件包装在另一个 React 组件中,并使用这样的引用来引用 Swiper:
import React,{ useRef } from 'react'
import { Swiper,SwiperSlide } from 'swiper/react'
import SwiperCore,{ Autoplay,Pagination } from 'swiper'
// ...
SwiperCore.use([Autoplay,Pagination])
export default function Slider() {
const swiperRef = useRef(null)
return (
<div
onMouseEnter={() => swiperRef.current.swiper.autoplay.stop()}
onMouseLeave={() => swiperRef.current.swiper.autoplay.start()}
>
<Swiper
ref={swiperRef}
autoplay={{ delay: 5000 }}
speed={1300}
spaceBetween={50}
slidesPerView={1}
allowTouchMove={false}
pagination={{ clickable: true }}
>
{/* slides */}
</Swiper>
</div>
)
}
,
您也可以使用pauseOnMouseEnter: true
:
autoplay={{
delay: 3000,disableOnInteraction: false,pauseOnMouseEnter: true,}}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。