使用带有useEffect的jQuery

时间:2020-06-09 20:52:13

标签: jquery reactjs materialize

我正在尝试为我的实体化轮播首页设置间隔。所以我找到了这个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;

请协助。谢谢

0 个答案:

没有答案