javascript - Glide.js 存在 React 问题

Question

第一次在这里提问。我使用 Glide.js 和 React 来制作轮播。当我点击箭头按钮时，它没有任何反应。

任何建议都会有很大帮助。谢谢!我的代码如下:

import Glide from '@glidejs/glide';

const sliderConfiguration = {
    type: "carousel",
    startAt: 0,
    animationTimingFunc: "ease-in-out",
    gap: 100,
    perView: 3
};

export default function Content() {
    const slider = new Glide(".glide", sliderConfiguration);

    useEffect(() => {
        return () => slider.mount()
    }, [slider])

    return (
        <div className="content">
           
            <div className="glide">
                <div className="glide__cover"></div>

                <div className="glide__track" data-glide-el="track">
                    <ul className="glide__slides">
                        <li className="glide__slide">
                            <div className="slide one">
                                <p>1</p>
                                <div className="rating">
                                    <div className="circle active"></div>
                                    <div className="circle active"></div>
                                    <div className="circle active"></div>
                                    <div className="circle active"></div>
                                    <div className="circle"></div>
                                </div>
                                <div className="slider-image">
                                    <img src={something} alt="something" />
                                    <div className="bookmark">
                                        <FaBookmark />
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li className="glide__slide">
                            <div className="slide two">
                                <p>2</p>
                                <div className="rating">
                                    <div className="circle active"></div>
                                    <div className="circle active"></div>
                                    <div className="circle active"></div>
                                    <div className="circle active"></div>
                                    <div className="circle"></div>
                                </div>
                                <div className="slider-image">
                                    <img src={something} alt="something" />
                                    <div className="bookmark">
                                        <FaBookmark />
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li className="glide__slide">
                            <div className="slide three">
                                <p>3</p>
                                <div className="slider-image">
                                    <img src={something} alt="something" />                                    
                                    <div className="bookmark">
                                        <FaBookmark />
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li className="glide__slide">
                            <div className="slide four">
                                <p>4</p>
                                <div className="slider-image">
                                    <img src={something} alt="something" />
                                    <div className="bookmark">
                                        <FaBookmark />
                                    </div>
                                </div>
                            </div>
                        </li>

                    </ul>
                </div>

                <div data-glide-el="controls" className="controls">
                    <div data-glide-dir="<" id="prev">
                        <FaArrowLeft className="controls-arrow" />
                    </div>
                    <div data-glide-dir=">" id="next">
                        <FaArrowRight className="controls-arrow" />
                    </div>
                </div>
            </div>
        </div>
    )
}

Answer 1

我认为上面代码的问题是当你的 DOM 没有准备好时你错误地初始化了你的 slider 。因此，尝试使用 useRef 引用您的 DOM，如下所示:

import Glide from "@glidejs/glide";

const sliderConfiguration = {
  type: "carousel",
  startAt: 0,
  animationTimingFunc: "ease-in-out",
  gap: 100,
  perView: 3
};

function Content() {
  const ref = React.useRef();

  React.useEffect(() => {
    const slider = new Glide(ref.current, sliderConfiguration);
    slider.mount();
  }, [ref]);

  return (
    <div className="content">
      // specify your `ref` here
      <div ref={ref} className="glide">
        // Your content
      </div>
    </div>
  );
}