Raect中的Swiper js如何在MouseEnter上停止自动播放并在MouseLeave上启动它 [英] Swiper js in Raect how to stop autoplay onMouseEnter and start it onMouseLeave
问题描述
我正在尝试通过构建一个具有自动播放功能的简单图像滑块来学习 swiper.js 的反应,但我不知道如何停止自动播放 onMouseEnter 并启动它 onMouseLeave.我试过 onMouseLeave={Swiper.autoplay.stop} 没有用.
从'react'导入React;从'./HeroSlider.module.css'导入类;从 'swiper/react' 导入 { Swiper, SwiperSlide };从 'swiper' 导入 SwiperCore, { Navigation, Pagination, Autoplay };导入'swiper/swiper-bundle.css';//swiper.min.css从 '../../Images/image1.png' 导入 image1;从'../../Images/image2.png'导入image2;从'../../../Images/image3.png'导入image3;SwiperCore.use([导航、分页、自动播放]);const HeroSlider = () =>{返回 (<刷卡机className={ classes.MainSlider }autoplay={{ 延迟:5000,disableOnInteraction:false,reverseDirection:true,waitForTransition:true }}分页={{可点击:真实}}导航onMouseEnter={}onMouseLeave={}><SwiperSlide className="full-w-h-container";标签=li";style={{ listStyle: 无";}}><img className={ `full-w-h-container ${ classes.ImgBg }` } src={image1} alt=image1";/></SwiperSlide><SwiperSlide className="full-w-h-container";标签=li";style={{ listStyle: 无";}}><img className={ `full-w-h-container ${ classes.ImgBg }` } src={image2} alt=image2";/></SwiperSlide><SwiperSlide className="full-w-h-container";标签=li";style={{ listStyle: 无";}}><img className={ `full-w-h-container ${ classes.ImgBg }` } src={image3} alt=image3";/></SwiperSlide></Swiper>)}导出默认的 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'从 'swiper/react' 导入 { Swiper, SwiperSlide }从 'swiper' 导入 SwiperCore, { Autoplay, Pagination }//...SwiperCore.use([自动播放,分页])导出默认函数 Slider() {const swiperRef = useRef(null)返回 (swiperRef.current.swiper.autoplay.stop()}onMouseLeave={() =>swiperRef.current.swiper.autoplay.start()}><刷卡机ref={swiperRef}自动播放={{ 延迟:5000 }}速度={1300}空间之间={50}每视图幻灯片={1}allowTouchMove={false}分页={{可点击:真实}}>{/* 幻灯片 */}</Swiper>
)}
I am trying to learn swiper.js in react by building a simple image slider with autoplay and I don't know how to stop autoplay onMouseEnter and start it onMouseLeave. I tried onMouseLeave={Swiper.autoplay.stop} and it didn't work.
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, Pagination, 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;
Edit:
I tried something like onMouseEnter={() => Swiper.autoplay.stop()} onMouseLeave={() => Swiper.autoplay.start()} but It doesn't work strangely though if I use something like: onClick={() => Swiper.autoplay.stop()} It works...
At the time of writing this, it looks like Swiper for React doesn't implement onMouseEnter
, onMouseLeave
, etc.
To work around this, I wrapped my Swiper component in another React component and referenced Swiper with a reference like so:
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>
)
}
这篇关于Raect中的Swiper js如何在MouseEnter上停止自动播放并在MouseLeave上启动它的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!