javascript react-multi-carousel未呈现

332nm8kg 于 2023-01-19 发布在 Java

关注(0)|答案(6)|浏览(142)

- 我正在从状态获取数据。现在我想使用react-multi-carousel制作一个carousel滑块**

我正在尝试为一个新闻卡组件实现https://www.npmjs.com/package/react-multi-carousel，这个组件有来自API的数据。到目前为止，我的代码如下所示，但是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>
)}};

JavaScript

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

6条答案

按热度按时间

acruukt91#

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

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

在你的css文件里：

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

赞(0）回复(0）举报 2023-01-19

yc0p9oo02#

我不确定这是否有用，但是我遇到了一个问题，当我把prop infinity设置为true时，carousel变成了空的，原来是因为我正在开发的网站使用了bootstrap rtl。
为了解决这个问题，我只是将carousel容器的方向更改为ltr。

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

赞(0）回复(0）举报 2023-01-19

yeotifhr3#

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

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

赞(0）回复(0）举报 2023-01-19

kiayqfof4#

我认为您应该将import 'react-multi-carousel/lib/styles.css'添加到顶层文件中，而不是添加到子组件文件中。NextJS的_app.tsx。我花了大约30米才发现这一点。

赞(0）回复(0）举报 2023-01-19

qzwqbdag5#

这在功能组件方面对我来说很有效：我迟到了，但它可以在未来的任何人有用。https://www.npmjs.com/package/react-multi-carousel

import React, { useState } from 'react';
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";

    const SampleCode = props => {
    const [maindata, setMaindata] = useState([{'name':"one"}, 
    {'name':"two"}]);
    const responsive = {
    desktop: {
        breakpoint: { max: 3000, min: 1024 },
        items: 3,
        slidesToSlide: 3 // optional, default to 1.
    },
    tablet: {
        breakpoint: { max: 1024, min: 464 },
        items: 2,
        slidesToSlide: 2 // optional, default to 1.
    },
    mobile: {
        breakpoint: { max: 464, min: 0 },
        items: 1,
        slidesToSlide: 1 // optional, default to 1.
    }
    };

    return (
    <div>

    <Carousel
    swipeable={false}
    draggable={false}
    showDots={true}
    responsive={responsive}
    ssr={false} // means to render carousel on server-side.
    infinite={true}
    autoPlay={false}
    autoPlaySpeed={1000}
    keyBoardControl={true}
    customTransition="all .5"
    transitionDuration={500}
    containerClass="carousel-container"
    // removeArrowOnDeviceType={["tablet", "mobile"]}
    //deviceType={true}//{this.props.deviceType}
    dotListClass="custom-dot-list-style"
    itemClass="carousel-item-padding-40-px"
    className='location-jobs '
   >

       {
        maindata.map((each) => {
            return (
                <div className='item p-3 mx-3 d-flex'>
                    {each.name}
                </div>

            )
        })
        }

         </Carousel>
       </div>
    );

}

导出默认的SampleCode;

赞(0）回复(0）举报 2023-01-19

brgchamk6#

它有宽度问题，就像我在我的项目中使用的一样，我必须使用媒体查询来设置宽度。我不知道为什么开发人员还没有解决这个问题，但你可以尝试在检查部分给出一个默认宽度，然后使用媒体查询来设置宽度。

赞(0）回复(0）举报 2023-01-19