정적 슬라이드

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

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 slidesLength = slides.length;

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

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

  return (
    <ImageBox>
      <LeftBtn onClick={goLeft}>&lt;</LeftBtn>
      <RightBtn onClick={goRight}>&gt;</RightBtn>
      <Image src={slides[imageIndex].url} alt={slides[imageIndex].title} />
    </ImageBox>
  );
};

export default ImageSlider0;

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

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

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

const Image = styled.img`
  width: 100%;
  height: 100%;
`;

• 왼쪽 버튼과 오른쪽 버튼을 눌렀을 때 state를 변경시켜준다.
• 조건문을 이용해서, 0번째 인덱스에서 왼쪽으로 가면 마지막 인덱스로 변경한다.
• 마지막 인덱스에서 오른쪽으로 가면 인덱스를 0으로 변경한다.

피드백

시중에 나와있는 슬라이더는 옆으로 넘어가는 애니메이션이 결합되어 있어, 해당방법에서 더 나아가야 한다.

참고 영상

https://www.youtube.com/watch?v=SK9AlIbexOE