React Slick

로빈·2024년 1월 18일
0

리액트 슬릭

이 글은 하루동안 방법을 못찾아, 라이브러리의 도움을 받은 한 사람의 가이드입니다.😂🤣

  • npm install react-slick
  • npm install slick-carousel

SimpleSlider 코드

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이 넘어갑니다.
profile
프론트엔드 개발자

0개의 댓글