我正在尝试为我的实体化轮播首页设置间隔。所以我找到了这个jQuery。尽管它不起作用。这说明webpack有问题。问题是,有没有办法使这项工作?或进行此自动播放的替代方法。这是我的代码。
import React, {useEffect} from 'react';
import {Link} from "react-router-dom";
import img from "./img/pillowSlider1.jpg";
import img2 from "./img/pillowSlider2.jpg";
import img3 from "./img/pilowSlider3.jpg"
import $ from "jquery";
const Home = () => {
useEffect(() => {
$('slider').slider({
indicators: false,
height: 1000,
transaction: 500,
interval: 6000
})
}, []);
return (
<section className="slider">
<ul className="slides">
<li>
<img src={img} alt=""/>
<div className="caption center-align">
<h2>Custom made pillows</h2>
<h5 className="light grey-text text-lighten-3 hide-on-small-only">Lorem ipsum dolor sit amet
consectetur adipisicing elit. Veniam non illo earum cumque id est!</h5>
<Link to="/pillows" className="btn btn-large red lighten-4">Learn More</Link>
</div>
</li>
<li>
<img src={img2} alt=""/>
<div className="caption left-align">
<h2>Make your couch or bed look pretty</h2>
<h5 className="light grey-text text-lighten-3 hide-on-small-only">Lorem ipsum dolor sit amet
consectetur adipisicing elit. Veniam non illo earum cumque id est!</h5>
<Link to="/pillows" className="btn btn-large red lighten-4">Learn More</Link>
</div>
</li>
<li>
<img src={img3} alt=""/>
<div className="caption right-align">
<h2>Bring your comfort to the next level</h2>
<h5 className="light grey-text text-lighten-3 hide-on-small-only">Lorem ipsum dolor sit amet
consectetur adipisicing elit. Veniam non illo earum cumque id est!</h5>
<Link to="/pillows" className="btn btn-large red lighten-4">Learn More</Link>
</div>
</li>
</ul>
</section>
);
};
export default Home;
请协助。谢谢