작성
·
927
0
영화를 슬라이드 부분에서 슬라이드 기능이 작동하지 않아 영상을 반복 시청과 똑같이 따라했는데도 안되어 조심스럽게 여쭈어 봅니다.... 대체 문제점이 무엇일까요??..저장소와 함께 보내드립니다..
답변 1
0
안녕하세요 ee5201 님
아래 작성해놓은 소스 코드를 Row.js 에 복사해서 한번 시도해봐 주시면 감사하겠습니다.
감사합니다.
import React, { useEffect, useState } from "react";
import axios from "../api/axios";
import MovieModal from "./MovieModal";
import "./Row.css";
// import Swiper core and required modules
import { Navigation, Pagination, Scrollbar, A11y } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
// Import Swiper styles
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/scrollbar";
export default function Row({ isLargeRow, title, id, fetchUrl }) {
const [movies, setMovies] = useState([]);
const [modalOpen, setModalOpen] = useState(false);
const [movieSelected, setMovieSelected] = useState({});
useEffect(() => {
fetchMovieData();
}, []);
const fetchMovieData = async () => {
const request = await axios.get(fetchUrl);
console.log("request", request);
setMovies(request.data.results);
};
const handleClick = (movie) => {
setModalOpen(true);
setMovieSelected(movie);
};
return (
<section className="row">
<h2>{title}</h2>
<Swiper
// install Swiper modules
modules={[Navigation, Pagination, Scrollbar, A11y]}
loop={true} // loop 기능을 사용할 것인지
breakpoints={{
1378: {
slidesPerView: 6, // 한번에 보이는 슬라이드 개수
slidesPerGroup: 6, // 몇개씩 슬라이드 할지
},
998: {
slidesPerView: 5,
slidesPerGroup: 5,
},
625: {
slidesPerView: 4,
slidesPerGroup: 4,
},
0: {
slidesPerView: 3,
slidesPerGroup: 3,
},
}}
navigation // arrow 버튼 사용 유무
pagination={{ clickable: true }} // 페이지 버튼 보이게 할지
>
<div id={id} className="row__posters">
{movies.map((movie) => (
<SwiperSlide>
<img
key={movie.id}
style={{ padding: "25px 0" }}
className={`row__poster ${isLargeRow && "row__posterLarge"}`}
src={`https://image.tmdb.org/t/p/original/${
isLargeRow ? movie.poster_path : movie.backdrop_path
} `}
alt={movie.name}
onClick={() => handleClick(movie)}
/>
</SwiperSlide>
))}
</div>
</Swiper>
{modalOpen && (
<MovieModal {...movieSelected} setModalOpen={setModalOpen} />
)}
</section>
);
}
정말 감사합니다 선생님....!!!!