GlideJS - Weird behavior when using slide with React Components

Question

I'm using GlideJS with a React Project, but it's returning a strange behavior. The components are not showing one per view and the width of them is changed.

The Component:

import React, { Component } from "react";
import Glide from "@glidejs/glide";

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 = () => (
    <div
      id={this.state.id}
      className="mt-10"
      style={{ overflowX: "hidden", userSelect: "none", maxWidth: "100vw" }}
    >
      <div className="glide__arrows" data-glide-el="controls">
        <button
          className="glide__arrow glide__arrow--left rounded-full"
          data-glide-dir="<"
          title="Veja mais ofertas!"
        >
          <span className="hidden">Anterior</span>
        </button>
        <button
          className="glide__arrow glide__arrow--right rounded-full"
          data-glide-dir=">"
          title="Veja mais ofertas!"
        >
          <span className="hidden">Próximo</span>
        </button>
      </div>
      <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>
      <div className="glide__bullets" data-glide-el="controls[nav]">
        {this.props.children.map((slide, index) => {
          return <button key={index} className="glide__bullet rounded-full" data-glide-dir={"=" + index} />;
        })}
      </div>
    </div>
  );
}

SliderGlide.defaultProps = {
  options: {}
};

So inside of the Carousel component, i pass the childrens and the options for glide, that are the components.

const Plans = ({ plans, handleOffer }) => {
  const carouselOptions = {    type: 'slide',
  perView: 1,
  startAt: 0,


}

 return (
    <div className="section__slider relative mt-10 flex justify-center items-center">
        <Carousel options={carouselOptions}>
      { plans.map((plan, i) => {
         return (
            <OfferProduct key={i} i={i} plan={plan} handleOffer={handleOffer}/>

          )
        })
        }
        </Carousel> 
        </div>
        ) 
 }
export default Plans;

I want to know if the problem is related to my code, some missed styledsheet that i need to import or if the actions passed to glide are wrong.

Answer 1

I just set up the full working demo for you using glidejs with React. check it out and let me know whether it works for you. code sandbox

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