자동 재생 무한 슬라이더 만들기

1.  슬라이더 디자인의 완성

저 페이지에서는 일단 슬라이더가 위와같이 나왔고, 디자이너랑 내가 생각한 애니메이션은 아래와 같은 무한 스크롤을 차용해서 서로 다른 방향으로 진행하려고 하였다. 

 

2. 라이브러리를 사용해야할까 ? 

 

관련 라이브러리로 Swiper와 React-slick을 고려해보았다. 

 

- Swiper

고려해봤지만 약간 저렇게 흘러가듯한 슬라이더 구현은 좀 힘들거 같다는 생각이 들었다. 관련 Example도 안보였고.. 무겁기도했다.

 

https://swiperjs.com/demos#infinite-loop

Swiper Demos

 

- React-Slick 

일단 Swiper보다는 지지율이 낮지만 내가 공부할 시절에 많이 사용했던 슬릭인데, 예제에 떡하니 내가 원하던 기능이 있었다. 써야할까..

하지만 사용하지 않았다. 뭔가 너무 간단해서 라이브러리 쓰기가 미안했다고나 할까... 

 

https://react-slick.neostack.com/docs/example/auto-play

Neostack

 

3.  CSS만으로 구현하기 

 

일단 구글링을 많이 해보고 내가 직접 그려보았다. 일단 여기서 중요한 포인트는

 

1. 최상단 Wrapper에는 overflow: hidden을 넣어줘야한다.

 

2. 아이템들을 감싸주고 있는 Wrapper에는 animation을 넣어주게되고, 길이를 (아이템 길이 * 아이템 총 갯수)로 맞춰주게 된다. 

 

3. 똑같은 아이템을 2번 넣어줘야한다 무슨 말이냐면 사진이 4개라면 <img /> 컴포넌트로 8개를 넣어줘야한다.

 

이제 애니메이션을 보자. 

 

여기서는 0%에서 100%로 translateX로 슬라이더 안에 담긴 아이템의 절반의 갯수를 넣어주게 된다. 이렇게 되면 딱 절반이 처음부터 끝까지 들어가면서 뒤에 나머지 애들이 채워주기때문에 자연스럽게 무한히 움직이는 슬라이더처럼 보이게된다. 

 

4. 코드

import Image from 'next/image';
import 'swiper/swiper-bundle.css';
 
interface Props {
  dir?: boolean;
}
 
const InfiniteSlide = ({ dir = false }: Props) => {
  return (
    <div className='m-auto h-[220px] w-auto overflow-hidden'>
      <div
        className={`flex w-[calc(340px*8)] gap-4 ${
          dir ? 'animate-rightslide' : 'animate-leftslide'
        }`}
      >
        <div className='h-[220px] w-[324px]'>
          <Image
            className='rounded-2xl'
            src='/image/dummy1.webp'
            alt='dummy1'
            width={324}
            height={220}
          />
        </div>
        <div className='h-[220px] w-[324px]'>
          <Image
            className='rounded-2xl'
            src='/image/dummy2.webp'
            alt='dummy2'
            width={324}
            height={220}
          />
        </div>
        <div className='h-[220px] w-[324px]'>
          <Image
            className='rounded-2xl'
            src='/image/dummy3.webp'
            alt='dummy3'
            width={324}
            height={220}
          />
        </div>
        {.....}
      </div>
    </div>
  );
};
 
export default InfiniteSlide;
 
// tailwind.config.js
 
/* extend: {
      keyframes: {
        slide: {
          '0%': {
            transform: 'translateX(0)',
          },
          '100%': {
            transform: 'translateX(calc(-340px*4))',
          },
        },
      },
      animation: {
        leftslide: 'slide 14s linear infinite',
        rightslide: 'slide 14s reverse infinite',
      },
    }, */
 

 

나의 결과물은 아래와 같았다.