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

Question

我正在尝试使用 "react-slick": "^0.24.0"来创建轮播。如果您知道更好的图书馆，我也想知道。

我已经查看了文档。我基本上只是复制并粘贴了他们的示例，并将我自己的 JSX 放在他们放幻灯片的地方。但我无法正确使用它。我认为它必须用 css 来构建，我已经尝试过但无法弄清楚。我不确定是哪个元素在控制交互。看起来 slider 正在将我所有的图像强制放入一张幻灯片中。请帮帮我。

第一个组件应该呈现 slider 。这几乎是从this example中一对一复制的.虽然我用的是{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>
        )
    }
}

import React from 'react';
import './CarouselItem.css';

export default function CarouselItem(props){
    return (
        <div className="movieContainer">
            <img className="moviePoster" src={`https://image.tmdb.org/t/p/w500/${props.data.poster_path}`} alt={props.data.title} />
        </div>
    );
}

Here's what it looks like now 编辑:前4张图片与轮播无关。

Answer 1

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

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

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