我刚刚成立您使用的完整的工作演示glidejs使用React。检查一下，让我知道它是否对您有用。代码沙箱

index.js

class Plans extends Component {
  state = {
    myPlans: [
      { id: 0, text: "plan 0", price: 0 },
      { id: 1, text: "plan 1", price: 1 },
      { id: 2, text: "plan 2", price: 2 },
      { id: 3, text: "plan 3", price: 3 }
    ]
  };
  handleOffer = id => {
    console.log("handleOffer clicked, id: ", id);
  };

  render() {
    const carouselOptions = { type: "slide", perView: 1, startAt: 0 };

    return (
      <div className="home-section test">
        <SliderGlide options={carouselOptions}>
          {this.state.myPlans.map(plan => (
            <OfferProduct
              key={plan.id}
              plan={plan}
              handleOffer={this.handleOffer}
            />
          ))}
        </SliderGlide>
      </div>
    );
  }
}
export default Plans;

OfferProduct.js

const OfferProduct = ({ plan, handleOffer }) => {
  return (
    <>
      <div onClick={() => handleOffer(plan.id)} className="card">
        <p>
          <h3> Card no: {plan.id} </h3>
          <span>price: {plan.price}</span>
        </p>
      </div>
    </>
  );
};

export default OfferProduct;

SliderGlide.js

export default class SliderGlide extends Component {
  state = { id: null };

  componentDidMount = () => {
    // Generated random id
    this.setState(
      { id: `glide-${Math.ceil(Math.random() * 100)}` },
      this.initializeGlider
    );
  };

  initializeGlider = () => {
    this.slider = new Glide(`#${this.state.id}`, this.props.options);
    this.slider.mount();
  };

  componentWillReceiveProps = newProps => {
    if (this.props.options.startAt !== newProps.options.startAt) {
      this.slider.go(`=${newProps.options.startAt}`);
    }
  };

  render = () => (
    // controls
    <div id={this.state.id} className="slider">
      <div className="two-controls-btns" data-glide-el="controls">
        <button className="arrow-left" data-glide-dir="<" title="start">
          <span className="hidden">Start</span>
        </button>
        <button className="arrow-right" data-glide-dir=">" title="end">
          <span className="hidden">End</span>
        </button>
      </div>
      {/* track  */}
      <div className="glide__track" data-glide-el="track">
        <div className="glide__slides" style={{ display: "flex" }}>
          {this.props.children.map((slide, index) => {
            return React.cloneElement(slide, {
              key: index,
              className: `${slide.props.className} glide__slide`
            });
          })}
        </div>
      </div>
      {/* bottom bullets */}
      <div className="bottom_bullets" data-glide-el="controls[nav]">
        {this.props.children.map((slide, index) => {
          return (
            <button
              key={index}
              className="single-bullet"
              data-glide-dir={"=" + index}
              title=".g"
            />
          );
        })}
      </div>
    </div>
  );
}

SliderGlide.defaultProps = {
  options: {}
};

styles.css

.App {
  font-family: sans-serif;
  text-align: center;
}

.home-section {
  width: 500px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightblue;
}

.card {
  width: 50px;
  height: 75px;
  background-color: violet;
  padding: 10px;
}

.slider {
  width: 300px;
  height: 200px;
  overflow-x: hidden;
  user-select: none;
  padding: 20px;
}
.arrow-left,
.arrow-right {
  background-color: #4caf50;
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 4px 2px;
  border-radius: 50%;
}
.two-controls-btns {
  width: 100%;
  margin: auto;
  padding: 0;
  display: flex;
  flex-flow: row;
  justify-content: space-around;
  align-items: center;
}
.single-bullet {
  background-color: #080f47;
  border: none;
  padding: 8px;
  display: inline-block;
  margin: 5px;
  border-radius: 50%;
}
.bottom_bullets {
  width: 200px;
  margin: auto;
  padding: 0;
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
}
.test {
  border: 1px solid red;
}