[UI] 무한 자동 재생 캐러셀 구현하기

🌈 Intro

프로젝트에서 추천 영상을 무한 자동 재생 캐러셀(Infinite Autoplay Carousel) 형식으로 보여주면 좋을 것 같았다. 무한 자동 재생 캐러셀은 아래와 같이 동일한 슬라이드가 자동으로 끊임없이 재생되는 캐러셀을 의미한다. 조사한 방법 중에 가장 간단한 방법을 공유한다.

📍 구현 방법

애니메이션의 시작과 끝을 같게 하여 슬라이드가 무한으로 있는 것처럼 보이게 한다. 풀어서 말하면

• 보여주려고 하는 슬라이드(original)와 슬라이드 복사본(clone)을 붙여 넣는다.
• 애니메이션 기간 동안 original의 너비만큼 왼쪽으로 이동한다.
• 애니메이션이 끝나면 clone이 View의 시작점에 도달함과 동시에 초기 상태(0ms)로 돌아간다.
• 위의 과정을 계속해서 반복한다.(animation-iteration-count: infinite)

View의 너비보다 original의 너비가 더 길어야 자연스러운 애니메이션이 가능하다.

📍 Code

// 설명을 위해 필요한 코드만 가져왔습니다.

import React from 'react'
import { styled } from 'styled-components'

const View = styled.div`
    display: flex;
    flex-direction: column;
    padding: 80px 100px;
    overflow: hidden; // ⭐️ View의 경계를 넘어가는 것은 숨김
`

const Slide = styled.ul`
    display: flex;
    position: relative;
    left: -100px; // ⭐️ View에 padding-left: 100px가 있어 시작점을 조절하고자 추가
    width: calc(250px * 14); // ⭐️ (original + clone)의 너비
    animation: autoPlay 10s linear infinite;

    @keyframes autoPlay {
        0% {
            transition: translateX(0);
        }
        100% {
            transform: translateX(calc(-250px * 7)); // ⭐️ original의 너비만큼 이동
        }
    }

    & > li {
        width: 250px; // ⭐️ 슬라이드 내부 요소 길이
    }
`

function RecommendedVideo() {
    const listEl = [1, 2, 3, 4, 5, 6, 7]
    
    return (
        <View>
            <Title>추천 영상</Title>
            <Detail>관심 있는 영상을 시청해 보세요.</Detail>
            <Slide>
                {listEl.concat(listEl).map((el) => { // ⭐️ concat으로 original과 clone 연결
                    return <li key={el}>{el}</li>
                })}
            </Slide>
        </View>
    )
}

export default RecommendedVideo

📍 완성

original의 첫 요소를 하늘색, clone의 첫 요소를 연두색으로 표시했다. 애니메이션 종료 시, 순간적으로 clone의 첫 요소(연두색)가 original의 첫 요소(하늘색)로 변하고, 애니메이션이 재시작하는 것을 확인할 수 있다.

Reference

🔗 Infinite autoplay carousel - codepen