使用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&nbsp;"~slick-carousel/slick/slick.css";&nbsp; import&nbsp;"~slick-carousel/slick/slick-theme.css";根据您的设置，您可能必须更改导入CSS的方式。