Glide.js with react issue

Question

It's my first time to ask here. I use Glide.js with react to make a carousel. When i click the arrow button, it gives no response.

Any suggestions would help a lot. Thanks! My code is as follows:

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

I think the problem of above code is you have initialized your slider incorrectly when the time your DOM is not ready. So try to reference your DOM by using useRef as following:

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>
  );
}