使用React和React-Slick，我只是很难理解如何使用它

Question

我尝试使用“ react-slick”：“ ^ 0.24.0”创建轮播。如果您知道更好的库，我也想知道。我仔细阅读了文档。实际上，我只是复制并粘贴了他们的示例，然后将我自己的JSX放在可以放置幻灯片的位置。但是我无法正确使用它。我认为它必须需要使用css进行结构化，我已经尝试过了，但无法弄清楚。我不确定哪个元素在控制互动。看起来像是滑块将我的所有图像强加到一张幻灯片中。请帮帮我。第一个组件应呈现滑块。在此示例中，这几乎是一对一复制的。虽然我用的{carousel}不是倍数<div><h3></h3></div在这里，您可以看到两个主要组成部分。import React from 'react';import CarouselItem from '../CarouselItem/CarouselItem';import './Carousel.css';import Slider from "react-slick";export class Carousel extends React.Component {    render(){    let settings = {      dots: true,      infinite: true,      speed: 500,      slidesToShow: 4,      slidesToScroll: 4,      initialSlide: 0,      responsive: [        {          breakpoint: 1024,          settings: {            slidesToShow: 3,            slidesToScroll: 3,            infinite: true,            dots: true          }        },        {          breakpoint: 600,          settings: {            slidesToShow: 2,            slidesToScroll: 2,            initialSlide: 2          }        },        {          breakpoint: 480,          settings: {            slidesToShow: 1,            slidesToScroll: 1          }        }      ]    };        const carousel = this.props.movies.map((item, index) => {            return (                <CarouselItem data={item} index={index} key={this.props.movies[index].id} />            );        });        return (            <div className="inner-carousel">                <Slider {...settings}>                    {carousel}                </Slider>            </div>        )    }}

Answer 1

我认为您缺少CSS。您的链接没有加载任何与react-slick相关的CSS。该文件建议

import "~slick-carousel/slick/slick.css"; 
import "~slick-carousel/slick/slick-theme.css";

根据您的设置，您可能必须更改导入CSS的方式。