javascript React多转盘不工作

lp0sw83n 于 2022-11-20 发布在 Java

关注(0)|答案(4)|浏览(126)

我正在从州里获取数据。现在我想用react-multi-carousel制作一个carousel滑块

我正在尝试为一个新闻卡组件实现https://www.npmjs.com/package/react-multi-carousel，该组件的数据来自API。到目前为止，我的代码如下所示，但是carousel似乎没有实现？

子组件

第一个

父组件

state = {
        items : []
    }
    fetchLatestNews = () => {
        api.getRealFeed()
        .then(response=>{
            this.setState({
                items : response.data.results
            });
        })
    }
    componentDidMount = () => {
        this.fetchLatestNews();
    }
    render(){
        return(
        <React.Fragment>
            <Item data={this.state.items}/>
        </React.Fragment>
)}};

JavaScript

来源：https://stackoverflow.com/questions/60144207/react-multi-carousel-is-not-workinig

4条答案

按热度按时间

6qftjkof1#

我也有同样的问题，
看看具体的属性。你可以添加一个类到容器，幻灯片或项目添加您的css规则。在我的情况下，我必须定义一个宽度到containerClass。

<Carousel
   containerClass="carousel-container"
   itemClass="carousel-item"
>
 ... // Your carousel here

在css文件中：

.carousel-container {
  width: 100%;
  ...
 }

赞(0）回复(0）举报 2022-11-20

8hhllhi22#

我不确定这是否有帮助，但我遇到了一个问题，当我将prop infinity设置为true时，carousel会变空。
为了解决这个问题，我只是将carousel容器的方向更改为ltr。如下所示：

[dir="rtl"] .carousel-container{
  direction: ltr;
}

赞(0）回复(0）举报 2022-11-20

icnyk63a3#

我通过向container类添加width属性来修复它
如果你使用tailwind你需要可以设置containerClass宽度

<Carousel
containerClass={`w-full`}
>
   {item}
</Carousel>

赞(0）回复(0）举报 2022-11-20

35g0bw714#

我认为你应该把import 'react-multi-carousel/lib/styles.css'添加到你的顶层文件中，而不是添加到子组件文件中。例如：NextJS的_app.tsx。我花了大约30米才找到这个。

赞(0）回复(0）举报 2022-11-20

我来回答

javascript React多转盘不工作

4条答案

相关问题

热门标签

最新问答