Я пытаюсь использовать «response-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>
)
}
}
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>
);
}
Вот как это выглядит сейчас
Редактировать: первые 4 изображения не связаны с каруселью.