동적 슬라이드 구현

로빈·2024년 1월 18일

동적 슬라이드

이 글은 애니메이션 효과나 옆으로 넘어가는 모션이 없는 동적 슬라이드를 구성하기 위한 코드입니다.

App0 코드

import ImageSlider0 from "./ImageSlider0.js";

const App0 = () => {
  const slides = [
    {url: './images/tea1.jpg', title:"pic1"},
    {url: './images/tea2.jpg', title:"pic2"},
    {url: './images/tea3.jpg', title:"pic3"},
    {url: './images/tea4.jpg', title:"pic4"}
  ]
  const containerStyles = {
    width: '500px',
    height: '280px',
    margin: '0 auto',
  }
  return(
    <div>
      <h1>Hello monsterlessons</h1>
      <div style={containerStyles}>
      <ImageSlider0 slides={slides} />
      </div>
    </div>
  );
}

export default App0;

단순히, 이미지 슬라이더 크기를 지정해주고, 가운데로 해주는 레이아웃입니다.

ImageSlider0 코드

import { useState, useRef, useEffect, useCallback } from "react";
import styled from "styled-components";

const ImageSlider0 = ({ slides }) => {
  const [imageIndex, setImageIndex] = useState(0);
  const [currList, setCurrList] = useState()
  const slidesLength = slides.length;
  let timeoutId;


  const goLeft = () => {
    if (imageIndex === 0) {
      setImageIndex(slidesLength - 1);
    } else {
      setImageIndex(imageIndex - 1);
    }
    resetTimeout();
  };

  const goRight = () => {
    if (imageIndex === slidesLength - 1) {
      setImageIndex(0);
    } else {
      setImageIndex(imageIndex + 1);
    }
    resetTimeout();
  };

  const resetTimeout = () => {
    // 기존의 타임아웃을 지웁니다.
    clearTimeout(timeoutId);
    // 자동 슬라이드용 새로운 타임아웃을 설정합니다.
    timeoutId = setTimeout(goRight, 3000);
  };



  useEffect(()=>{
    timeoutId = setTimeout(goRight, 3000);
    return () => clearTimeout(timeoutId);
  }, [imageIndex])


  let myList=slides



  return (
    <ImageBox>
      <LeftBtn onClick={goLeft}>&lt;</LeftBtn>
      <RightBtn onClick={goRight}>&gt;</RightBtn>
      <ImageRoll currentIndex={imageIndex} length={slidesLength}>
        {myList.map((slide)=>(
        <Image key={slide.url} src={slide.url} alt={slide.title}/>  
        ))
        }
      </ImageRoll>
      
    </ImageBox>
  );
};

export default ImageSlider0;

const ImageBox = styled.div`
  background-color: pink;
  width: 100%;
  height: 100%;
  position: relative;
  overflow:hidden;
`;

const LeftBtn = styled.div`
  position: absolute;
  top: 50%;
  left: 15px;
  cursor: pointer;
  font-size:35px;
  font-weight:700;
  transform:translate(0,-50%);
  z-index: 5;
`;

const RightBtn = styled.div`
  position: absolute;
  top: 50%;
  right: 15px;
  cursor: pointer;
  font-size:35px;
  font-weight:700;
  transform:translate(0,-50%);
  z-index: 5;
`;

const ImageRoll = styled.div`
  display: flex;
  transform: translateX(${(props) => `-${props.currentIndex * 500}px`});
  transition: transform ease-out 0.3s;
  width: ${(props) => `${props.length * 500}px`};
  height: 100%;


  `;


const Image = styled.img`
  width: 100%;
  height:100%;
  object-fit: cover;
`;