0

我创建了一个运行良好的滑翔机，功能没有问题，我想要实现的是在幻灯片中添加一个按钮。到目前为止，链接和所有幻灯片内容都可以正常工作，但按钮单击事件却不行。我尝试添加.disable()andpause()方法，但它不起作用。而且我找不到这样的东西，也找不到文档中的任何东西。如果有人有办法，那将对我有很大帮助。

滑动支架：

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;

我的组件：

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

1 回答 1

0

对于任何尝试相同的人，我只是添加position:static到类中，然后添加glide.mount({Anchor});到mount()方法中

于 2021-01-13T21:50:04.347 回答