이 글은 하루동안 방법을 못찾아, 라이브러리의 도움을 받은 한 사람의 가이드입니다.😂🤣
- npm install react-slick
- npm install slick-carousel
import React from 'react';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import styled from 'styled-components';
// 캐러셀에 표시할 이미지 데이터
const images = [
'./images/tea1.jpg',
'./images/tea2.jpg',
'./images/tea3.jpg',
];
const SimpleSlider = () => {
const settings = {
arrows: true,
dots: true, // 페이지 인디케이터 표시 여부
infinite: true, // 무한 루프
speed: 500, // 애니메이션 속도
autoplay : true,
autoplaySpeed : 3000,
slidesToShow: 1, // 한 번에 표시할 슬라이드 수
slidesToScroll: 1, // 한 번에 스크롤할 슬라이드 수
};
return (
<StyledSlider {...settings}>
{images.map((image, index) => (
<ImageBox key={index}>
<Image src={image} alt={`Slide ${index + 1}`} />
</ImageBox>
))}
</StyledSlider>
);
};
export default SimpleSlider;
const StyledSlider = styled(Slider)` // Slider 컴포넌트를 꾸며주는 스타일드 컴포넌트 생성
width:450px;
margin:auto;
margin-top:115px;
position: relative;
.slick-next {
background-color: black;
position: absolute;
top:50%;
right:15px;
transform:translate(0,-50%);
z-index: 5;
}
.slick-prev {
background-color: pink;
position: absolute;
top:50%;
left:15px;
z-index: 5;
transform:translate(0,-50%);
}
`;
const ImageBox = styled.div`
width:100%;
height:100%;
`;
const Image = styled.img`
width:100%;
height:100%;
`;
- 해당 코드를 실현하면, 1234 다음에 오른쪽으로 1이 넘어갑니다.