Как сделать слайдер на reactJS?
Всем привет.
Как сделать слайдер на reactJS ( redux ) имея API с данными в которых есть картинки?
Я прописал получение данных с API:
filmsService:
import {urls} from "../configs";
const filmService = {
getAll: (page = 1) => apiService.get(urls.getMovies, {params:{page}}),
getWithGenres: (page = 1, id) => apiService.get(${urls.getMovies}?page=${page}&with_genres=${id})\
export {
filmService
}
Movies:
import React, {useEffect} from 'react';
import {useSearchParams} from "react-router-dom";
import {useDispatch, useSelector} from "react-redux";
import {filmActions} from "../../redux/slices/filmSlice";
import {Movie} from "./Movie";
import css from './styles/film.module.css'
import {genreActions} from "../../redux/slices/genreSlice";
const Movies = () => {
const {films} = useSelector(state => state.films)
const dispatch = useDispatch();
const [query, setQuery] = useSearchParams({page: '1'})
useEffect(() => {
dispatch(filmActions.getAll({page: query.get('page')}))
}, [dispatch, query])
return (
<div className={css.Father}>
{films.map(item => <Movie key={item.id} films={item}/>)})}
</div>
);
};
export {Movies};
Movie:
import React from 'react';
import css from './styles/film.module.css'
import {posterURL} from "../../configs";
const Movie = ({films}) => {
const {poster_path} = films
return (
<div className={css.Father}>
<img src={posterURL+poster_path} alt="" className={css.Img}/>
</div>
);
};
export {Movie};
API:
"results": [
{
"adult": false,
"backdrop_path": "/q2fY4kMXKoGv4CQf310MCxpXlRI.jpg",
"genre_ids": [
878,
27,
35
],
"id": 536554,
"original_language": "en",
"original_title": "M3GAN",
"overview": "A brilliant toy company roboticist uses artificial intelligence to develop M3GAN, a life-like doll programmed to emotionally bond with her newly orphaned niece. But when the doll's programming works too well, she becomes overprotective of her new friend with terrifying results.",
"popularity": 2088.921,
"poster_path": "/d9nBoowhjiiYc4FBNtQkPY7c11H.jpg",
"release_date": "2022-12-28",
"title": "M3GAN",
"video": false,
"vote_average": 7.5,
"vote_count": 1661
},
{
"adult": false,
"backdrop_path": "/cU7itLM8qmwMiaNnWsJPQLKe79j.jpg",
"genre_ids": [
878,
27,
12,
28
],
"id": 1013870,
"original_language": "en",
"original_title": "Kids vs. Aliens",
"overview": "All Gary wants is to make awesome home movies with his best buds. All his older sister Samantha wants is to hang with the cool kids. When their parents head out of town one Halloween weekend, an all-time rager of a teen house party turns to terror when aliens attack, forcing the siblings to band together to survive the night.",
"popularity": 974.881,
"poster_path": "/wQ53sO5n9LCFbssV3oQ4CuajL1L.jpg",
"release_date": "2023-01-20",
"title": "Kids vs. Aliens",
"video": false,
"vote_average": 6.2,
"vote_count": 30
},
{```