02-1 main 화면: 사진 자동 슬라이드

main 화면에서 가장 시간을 많이 투자한 것이 사진 여러장을 자동으로 무한히 흘러가게 만드는 것이었다.

손으로 직접 슬라이드 하지 않고 일정 속도로 자동 슬라이드가 되게 하고싶었는데 쉽지 않았다. 나와 같은 것을 만든 사람들이 있지도 않아서 혼자 힘으로 해보려고 했다.

 

찾아보니 화면에 한장 씩 보여주면서 무한히 슬라이드 하는 것은 setInterval()을 사용하는 것 같았는데, 나는 사진이 ppt 슬라이드 처럼 뚝뚝 끊기면서 넘어가는게 아니라  모든 사진들이 물 흐르듯이 무한히 흘러가는 것을 원했기 때문에 사용하지 않았다.

 

<Photos.jsx>

import '../styles/photos.scss'
import {Photo} from '../contants/SlidePhotos'
import { useEffect, useState } from 'react';
const Photos = () => {
    const [photo,setPhoto]=useState([]);
    useEffect(()=>{
        const newPhotos=[];
        for(let i=0; i<100;i++){
            newPhotos.push(...Photo)
        }
        setPhoto(newPhotos);
    },[])
    return (
        <div className='photos_container'>
            <div className='show'>
                {
                    photo.map((src,index) => (
                        <div className='index'>
                            <img src={src} alt={`slide:${index}`} />
                        </div>
                    ))
                }
            </div>
        </div>
    );
};

export default Photos;

jsx 코드는 이렇게 짰다. 여러 사진들을 Photo로 import 해서 가져왔다. 그리고 사진들을 계속 이어붙여서 대왕(사진들 100개 반복_ 배열을 만들었다. 그리고 대왕 배열을 map으로 사진들을 하나씩 읽으면서 화면에 보이게 했다.

 

phtos.scss

.photos_container{
    display: flex;
    justify-content: center;
    margin: 0;
    padding-top: 15vh;
    overflow: hidden;
    
    .show{
        display: flex;
        flex-direction: row;
        width:100vw;
        animation: slide 30s linear infinite;
        
    }
    .index{
        flex-shrink: 0;
        img{
            width: 20vw;
            height: 30vw;
            max-width:400px;
            max-height: 250px;
            min-width: 100px;
            margin: 0 0.5vw;
        }
    }
}
@keyframes slide {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

animation을 x축 0부터 -100%까지 설정하고 .show에서 30초 속도로 linear하게 무한히 반복하도록 했다.

사실 이 방법도 중간에 맨 처음 이미지로 되돌가면서 살짝 끊기는 느낌이 있지만 보는데 크게 지장이 있는거 같지 않아 그대로 진행했다.

혹시 더 매끄럽고 자연스럽게 사진이 넘어가도록 하는 방법을 아시는 분들은 알려주세오....😂