2

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

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

子组件

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

2 回答 2

5

我遇到过同样的问题，

看看具体的道具。您可以将类添加到容器、幻灯片或项目以添加您的 CSS 规则。就我而言，我必须为 containerClass 定义一个宽度。

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

在你的css文件中：

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

希望能帮助到你！

于 2020-06-04T10:02:12.023 回答
3

我不确定这是否会有所帮助，但是当我将道具无穷大设置为 true 时，我遇到了轮播变空的问题。原来这是因为我正在处理的网站使用引导 rtl。

为了解决这个问题，我只是将轮播容器的方向更改为 ltr。像这样的东西：

[dir="rtl"] .carousel-container{
  direction: ltr;
}
于 2020-12-08T16:33:18.263 回答