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.

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 (
      

        
          {this.state.myPlans.map(plan => (
            
          ))}
        
      
    );
  }
}
export default Plans;

OfferProduct.js

const OfferProduct = ({ plan, handleOffer }) => {
  return (
    <>
      
 handleOffer(plan.id)} className="card">
        

          
 Card no: {plan.id} 
          price: {plan.price}
        

      
    
  );
};

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
    

      

        
          Start
        
        
          End
        
      
      {/* track  */}
      

        

          {this.props.children.map((slide, index) => {
            return React.cloneElement(slide, {
              key: index,
              className: `${slide.props.className} glide__slide`
            });
          })}
        
      
      {/* bottom bullets */}
      

        {this.props.children.map((slide, index) => {
          return (
            
          );
        })}
      
    
  );
}

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