javascriptreactjsglidejs

GlideJs adding buttons


I created a glider that works good, no problem with the functionality, what I'm trying to achieve is to add a button inside the slides. So far, the links and all the slide content works good but not the button click event. I tried adding the .disable() and the pause() methods but it doesn't work. And I can't find anything like this, nor anything in the documentation. If anyone would have an approach, it'll help me a lot.

Glide holder:

import React, { Component } from 'react';
import Glide, {Swipe, Controls} from '@glidejs/glide';

import myComponent from './myComponent';


class myHolder extends Component {
  constructor(props) {
    super(props);

    }
  }

  componentDidMount() {

    const glide = new Glide(`.myGliderComponent`, {
      type: carouselType,
      focusAt: 0,
      perTouch: 1,
      perView: 4,
      touchRatio: 1,
      startAt: 0,
      rewind: false,
    });
    glide.mount({Controls});
    const CAROUSEL_NUMBER = 3;
    const carouselType = this.props.displayedProducts.length <= CAROUSEL_NUMBER ? 'slider' : 'carousel';
  }

  render() {
    return (
      <div>
          <div data-glide-el="track" className="glide__track">
            <ul className="glide__slides">
              {
                this.props.displayedProducts.map(({ name, image,} = product, index) => (
                  <li className="glide__slide slider__frame">
                    <MyComponent
                      name={name}
                      image={image}
                    />
                  </li>
                ))
              }
            </ul>
          </div>
        </div>
    );
  }
}

export default myHolder;

myComponent:

import React from 'react';

const myComponent = (
  {
    name,
    image,
  }
) => {
const buttonClicked = () => {
  console.log("button clicked")
}

  return (
    <div>
        <p>{name}</p>
        <img
          alt=""
          src={image}
        />
        <button onClick={buttonClicked}>Testing btn</button>
      </div>
  );

 }

export default myComponent;

Solution

  • For anyone trying the same, I just added position:static to the class, and the glide.mount({Anchor}); to the mount() method