[TIL-147] 위코드 54일차: React에서 슬라이더 만들기

시작 실패
Your requested instance type (t2.micro) is not supported in your requested Availability Zone (ap-northeast-2b). Please retry your request by not specifying an Availability Zone or choosing ap-northeast-2a, ap-northeast-2c.

 

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: UNPROTECTED PRIVATE KEY FILE! @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
It is required that your private key files are NOT accessible by others. This private key will be ignored.

---

 

const Job = () => {
  const [pos, setPos] = useState(0);
  
  const slideLeft = () => {
    setPos(prev => {
      if (prev === 0) {
        return imgArr.length - 1;
      } else {
        return prev - 1;
      }
    });
  };

  const slideRight = () => {
    setPos(prev => {
      if (prev === imgArr.length - 1) {
        return 0;
      } else {
        return prev + 1;
      }
    });
  };
  
  const imgArr = [
    '/images/cake.jpeg',
    '/images/cake2.jpeg',
    '/images/cake.jpeg',
  ];

  return (
    <div className="slider">
      <ul
        style={{
          width: `${imgArr.length * 100}%`,
          marginLeft: `${-pos * 100}%`,
        }}
      >
        {imgArr.map((url, index) => (
          <li
            key={index}
            style={{ width: `calc(100% / ${imgArr.length})` }}
          >
            <div
              className="articleThumbnail"
              style={{ backgroundImage: `url(${url})` }}
            />
          </li>
        ))}
      </ul>
      <i
        className="fa fa-angle-left slideLeft"
        aria-hidden="true"
        onClick={slideLeft}
      />
      <i
        className="fa fa-angle-right slideRight"
        aria-hidden="true"
        onClick={slideRight}
      />
    </div>
  );

.slider {
    position: relative;
    height: calc((80vw - 365px) * 0.75);
    overflow: hidden;
    border: 1px solid #e0e2e3;
    border-radius: 3px;

    ul {
      display: flex;
      height: 100%;
      transition: 0.6s ease-in-out;

      .articleThumbnail {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: 50%;
      }
    }

    .slideLeft,
    .slideRight {
      position: absolute;
      bottom: calc(50% - 25px);
      display: flex;
      align-items: center;
      padding: 0 25px;
      height: 50px;
      color: #9299a1;
      font-size: 26px;
      cursor: pointer;
    }

    .slideLeft {
      left: 10px;
    }

    .slideRight {
      right: 10px;
      justify-content: flex-end;
    }
  }

HTML

<ul>, <li>

 

 

CSS

overflow: hidden; width: 100% * num; margin-left: pos * 100%;

 

 

 

JavaScript & React

const [pos, setPos] = useState(0);

 

 

참고

* http://junil-hwang.com/blog/javascript-slide-animation/