Nuka-carousel自定义箭头按钮

Question

Nuka-carousel自定义箭头按钮

5

我是nuka-carousel react的新手。我想添加上一张/下一张箭头按钮，而不仅仅是“上一个”和“下一个”按钮。我找到了各种解决方案，其中包括编写一个修饰函数。我尝试了它，但没有得到我期望的结果。以下是我的代码：

import Carousel from 'nuka-carousel';
import createReactClass from 'create-react-class';
var Decorators = [
    {
        component: createReactClass({
            render() {
                return (
                    <div>
                        <i className="fa fa-arrow-left" onClick={this.props.previousSlide} aria-hidden="true"></i>
                    </div>
                )
            }
        }),
        position: 'CenterLeft',
        style: {
            padding: 20
        }
    },
    {
        component: createReactClass({
            render() {
                return (
                    <div>
                        <i className="fa fa-arrow-right" onClick={this.props.nextSlide} aria-hidden="true"></i>
                    </div>
                )
            }
        }),
        position: 'CenterRight',
        style: {
            padding: 20
        }
    }
];

return(
    <Carousel decortators={Decorators} slidesToShow={3} cellSpacing={50} >
        {cards}
    </Carousel>

);

- pranta

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- naffiq · Accepted Answer

我相信你需要设置 Carousel 组件的 render*Controls 属性（其中 * 是控件的特定位置，例如 CenterLeft 或 CenterRight）：

<Carousel
  renderCenterLeftControls={({ previousSlide }) => (
    <button onClick={previousSlide}>
      <i className="fa fa-arrow-left" />
    </button>
  )}
  renderCenterRightControls={({ nextSlide }) => (
    <button onClick={nextSlide}>
      <i className="fa fa-arrow-right"/>
    </button>
  )}
>
  {cards}
</Carousel>

更新：文档链接已更新