glidejs在React中使用

import { useRef, useEffect } from "react";
import Glide from "@glidejs/glide";
import "@glidejs/glide/dist/css/glide.core.min.css";
import "@glidejs/glide/dist/css/glide.theme.min.css";
import "./index.less";

const sliderConfiguration = {
  autoplay: 4000,
};

function Swrap() {
  const ref = useRef();

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

  return (
      <>
        <div ref={ref} className="glide">
          <div className="glide__track" data-glide-el="track">
            <ul className="glide__slides">
              <li className="glide__slide">
                <div
                  className="container"
                  style={{ backgroundColor: "#0033FF" }}
                >
                  Professional Ruby on Rails Developer looking for job offers.
                </div>
              </li>
              <li className="glide__slide">
                <div
                  className="container"
                  style={{ backgroundColor: "#660000" }}
                >
                  PHP, Ruby, Ruby on Rails, Sinatra, Grape, MariaDB, PostgreSQL,
                  Redis, jQuery, AJAX, XML, JSON, SCSS, HTML.
                </div>
              </li>
              <li className="glide__slide">
                <div
                  className="container"
                  style={{ backgroundColor: "#9933CC" }}
                >
                  React
                </div>
              </li>
              <li className="glide__slide">
                <div
                  className="container"
                  style={{ backgroundColor: "#009900" }}
                >
                  Heroku, AWS (including Cloud formation and Cloud-init) and
                  VMware as Infrastructure. Git for source code.
                </div>
              </li>
              <li className="glide__slide">
                <div
                  className="container"
                  style={{ backgroundColor: "#3333FF" }}
                >
                  Development of high load projects.
                </div>
              </li>
              <li className="glide__slide">
                <div
                  className="container"
                  style={{ backgroundColor: "#CC6600" }}
                >
                  Maintained a distributed Unix infrastructure, Linux
                  Administration (RHEL/CentOS/Fedora, OpenSuse Leap/Tumbleweed).
                </div>
              </li>
              <li className="glide__slide">
                <div
                  className="container"
                  style={{ backgroundColor: "#FF0000" }}
                >
                  Ruby on Rails - Imagine, design, build web apps and bring your
                  dreams to life with Rails 4 / 5 / 6 / 7.
                </div>
              </li>
              <li className="glide__slide">
                <div
                  className="container"
                  style={{ backgroundColor: "#333399" }}
                >
                  Create an eCommerce website: Prestashop, Magento, OpenCart,
                  ModX, Joomla, VirtueMart, K2Store, JoomShopping.
                </div>
              </li>
              <li className="glide__slide">
                <div
                  className="container"
                  style={{ backgroundColor: "#006666" }}
                >
                  <a href="mailto:info@masterpro.ws"> info@masterpro.ws</a>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </>
  );
}

export default Swrap;

css

.glide{
    width: calc(100% - 540px);
    display: flex;

    flex-direction: column;
}
.container{
    margin: 0 auto;
    height: 300px;
    max-width: 75% !important;
    color: white;
    font-size: 1.3rem;
    padding: 10%;
    text-align: center;
}