애니메이션 되는 슬라이드 만들기

애니메이션이 적용된 슬라이드 구현 방법 기록

---

 

1.MainSlider.js 파일을 생성

import React from "react";
import styled from "styled-components";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";

const MainSliderBlock = styled.div`
  max-width: 1800px;
  margin: auto;
  width: 100vw;
  .slick-track {
    margin-top: 410px;
  }
  .slide {
    height: 50vh;
    line-height: 50vh;
    text-align: center;
    img {
      display: inline-block;
      width: 160px;
      animation: shaking 4.5s infinite ease-in-out forwards;
    }
  }
`;

const MainSlider = () => {
  const sliders = [
    { src: "./assets/image/slide1/slide_img1.png", alt: "과자1" },
    { src: "./assets/image/slide1/slide_img2.png", alt: "과자2" },
    // 추가 이미지들...
  ];

  const options = {
    dots: false,
    autoplay: true,
    autoplaySpeed: 2000,
    slidesToShow: 5,
    slidesToScroll: 1,
    arrows: false,
    centerMode: true,
    centerPadding: "60px",
    infinite: true,
  };

  return (
    <MainSliderBlock>
      <Slider className="slider" {...options}>
        {sliders.map((item, index) => (
          <div className="slide" key={index}>
            <img src={item.src} alt={item.alt} />
          </div>
        ))}
      </Slider>
    </MainSliderBlock>
  );
};

export default MainSlider;

 

 

2. 슬라이더 라이브러리 설정

slick-carousel 라이브러리를 이용해서 슬라이드를 쉽게 구현할 수 있어요.

 

 

3. 슬라이더 옵션 설정

슬라이더 옵션을 설정해서 슬라이더가 어떻게 동작할지 결정해요.

const options = {
  dots: false, // 슬라이더 하단의 도트 여부
  autoplay: true, // 자동 재생 여부
  autoplaySpeed: 2000, // 자동 재생 속도
  slidesToShow: 5, // 보여질 슬라이드 개수
  slidesToScroll: 1, // 스크롤 시 이동할 슬라이드 개수
  arrows: false, // 화살표 여부
  centerMode: true, // 센터 모드 여부
  centerPadding: "60px", // 센터 모드 시 패딩
  infinite: true, // 무한 반복 여부
  responsive: [ // 반응형 설정
    {
      breakpoint: 500,
      settings: {
        slidesToShow: 1,
        centerPadding: "90px",
      },
    },
  ],
};

 

 

4. 애니메이션 및 스타일 적용

각 슬라이드에 애니메이션을 적용해서 좀 더 동적인 느낌을 줄 수 있어요.

import { keyframes } from "styled-components";

// 흔들리는 애니메이션
const shaking = keyframes`
  0%, 100% {
    transform: rotate(0);
    transform-origin: left bottom;
  }

  22% {
    transform: rotate(7.5deg);
    transform-origin: right bottom;
  }

  44% {
    transform: rotate(-7.5deg);
    transform-origin: left bottom;
  }

  66% {
    transform: rotate(3.75deg);
    transform-origin: right bottom;
  }

  77% {
    transform: rotate(-1.875deg);
    transform-origin: left bottom;
  }

  88% {
    transform: rotate(.9375deg);
    transform-origin: right bottom;
  }
`;

 

이 애니메이션을 슬라이드 이미지에 적용해요.

const MainSliderBlock = styled.div`
  max-width: 1800px;
  margin: auto;
  position: relative;
  width: 100vw;
  .slick-track {
    margin-top: 410px;

    .slide {
      height: 50vh;
      line-height: 50vh;
      text-align: center;
      img {
        display: inline-block;
        width: 160px;
        animation: ${shaking} 4.5s infinite ease-in-out forwards;
      }
    }

    .slick-center {
      img {
        width: 240px;
      }
    }
  }
`;

 

 

5. 슬라이드 콘텐츠 추가

슬라이드에 표시될 이미지를 추가하고, 이미지가 링크를 포함하도록 설정할 수 있어요.

const MainSlider = () => {
  const sliders = [
    { src: "./assets/image/slide1/slide_img1.png", alt: "과자1" },
    { src: "./assets/image/slide1/slide_img2.png", alt: "과자2" },
    { src: "./assets/image/slide1/slide_img3.png", alt: "과자3" },
    { src: "./assets/image/slide1/slide_img4.png", alt: "과자4" },
    { src: "./assets/image/slide1/slide_img5.png", alt: "과자5" },
    { src: "./assets/image/slide1/slide_img6.png", alt: "과자7" },
    { src: "./assets/image/slide1/slide_img8.png", alt: "과자8" },
    { src: "./assets/image/slide1/slide_img9.png", alt: "과자9" },
    { src: "./assets/image/slide1/slide_img10.png", alt: "과자10" },
    { src: "./assets/image/slide1/slide_img11.png", alt: "과자11" },
    { src: "./assets/image/slide1/slide_img12.png", alt: "과자12" },
  ];

  return (
    <MainSliderBlock>
      <Slider className="slider" {...options}>
        {sliders.map((item, index) => (
          <div className="slide" key={index}>
            <Link to="/product"><img src={item.src} alt={item.alt} /></Link>
          </div>
        ))}
      </Slider>
    </MainSliderBlock>
  );
};