Glide.js与反应问题

问题描述

这是我第一次在这里问。我将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>
    )
}

解决方法

我认为上述代码的问题是，当DOM尚未准备就绪时，您未正确初始化滑块。因此，尝试使用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>
  );
}