react-multi-carousel无法工作。

Posted 2023-01-29

我正在从国家获取数据。现在我想用 react-multi-carousel 做一个旋转滑块。

我正在努力实现 https:/www.npmjs.compackagereact-multi-carousel 的新闻卡组件，其数据来自API。到目前为止，我的代码如下，但旋转木马似乎没有实现？

子组件

import Carousel from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css'

    const responsive = 
        superLargeDesktop: 
          breakpoint:  max: 4000, min: 3000 ,
          items: 5
        ,
        desktop: 
          breakpoint:  max: 3000, min: 1024 ,
          items: 3
        ,
        tablet: 
          breakpoint:  max: 1024, min: 464 ,
          items: 2
        ,
        mobile: 
          breakpoint:  max: 464, min: 0 ,
          items: 1
        
    ;
    const size = 15;
    const Itemlist = props.data.slice(0, size).map((item,id) => 
        return(
            <div className="item px-2 col-md-3" key=item.title>
            <div className="alith_latest_trading_img_position_relative">
                <figure className="alith_post_thumb"> 
                <Link
                to=
                    pathname : `/details/$id`,
                
                >
                <img
                    alt=""
                    src=item.multimedia ? item.multimedia[0].url : image
                    className="w-100 thumbnail"
                />
                </Link>
                </figure>
                <div className="alith_post_title_small">
                <Link
                to=
                    pathname : `/details/$id`,
                
                ><strong>item.title.length > 30 ? item.title.substring(0,30) + ".." : item.title</strong>
                </Link>
                <p className="meta">
                    <span>`$moment(item.published_date).fromNow()`</span>
                </p>
                </div>
            </div>
        </div>
        )
    )
    return (
        <React.Fragment>
            <Carousel responsive=responsive>
                  Itemlist
            </Carousel>
        </React.Fragment>
    );
;

母体部分

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

答案

我有同样的问题。

看看具体的道具。你可以给容器、幻灯片或项目添加一个类，用于添加你的css规则。在我的案例中，我必须给容器类定义一个宽度。

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

并在你的css文件中。

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

希望能帮到你