Nuka轮播自定义箭头按钮

时间:2018-08-16 12:58:50

标签: reactjs

我是nuka-carousel react的新手,我想添加prev-next箭头按钮,而不仅仅是'prev'和'next'书面按钮。我找到了编写装饰器函数的各种解决方案,虽然尝试过但没有找到我想要的输出。 这是我的代码:

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>

);

1 个答案:

答案 0 :(得分:1)

我相信您需要设置 Steps <- ex%>% rbind(c(nrow(ex)+1,1)) %>% filter(sign(V1)!=0) %>% mutate(step= id-c(1,(lag(id)[-1]))) c <- c() k<-10 for (i in 1:nrow(Steps)){ c<- c(c,c(0:max(0,min(Steps[i,3], k)-1))) if(Steps[i,3]> k){ c <- c(c, (k-Steps[i,3]+1):-1) } } c<-c[ex$id] 组件的render*Controls属性(其中*是特定的控制位置,例如CarouselCenterLeft):

CenterRight