[1차 프로젝트] 캐러셀 슬라이드1

1. 버튼1 누르면 이미지1로 바뀐다
2. 1번의 이미지가 바뀔 때 fadein-fadeout 효과로 바뀐다

JS

    <div className="bannerContainerWrapper">
        <div className="bannerContainer">
          <div ref={bannerContainer} className="carousel">
            {INNER__BANNER.map((inner, index) => {
              return (
                <div
                  key={index}
                  className={`inner ${btnNum === index && "active"}`}
                >
                  <img className="item" alt={inner.alt} src={inner.src} />
                </div>
              );
            })}
          </div>
        </div>
        <Buttons
          imgLength={INNER__BANNER.length} 
          btnNum={btnNum} 
          handleBtnClick={handleBtnClick}
        />
      </div>

Button 컴퍼넌트

import React from "react";

const Buttons = ({ imgLength, btnNum, handleBtnClick }) => {
  const li = Array(imgLength)
    .fill(0)
    .map((item, index) => {
      return index === btnNum ? (
        <li
          data-id={index}
          key={index}
          className="nowImg"
          onClick={e => handleBtnClick(e)}
        />
      ) : (
        <li key={index} data-id={index} onClick={e => handleBtnClick(e)} />
      );
    });
  return <ul className="buttons">{li}</ul>;
};

export default Buttons;

SCSS

.bannerContainerWrapper {
    .bannerContainer {
      width: 100%;
      height: 580px;
      margin-top: 100px;

      .carousel {
        position: relative;
        height: 580px;
        overflow: hidden;
        .inner {
          opacity: 0;
          transition: opacity 1s;
          .item {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
          }
          // width: 100%;
          // position: absolute;
          // z-index: -1;
          // left: 0;
          // top: 0;
          // width: 100%;
          // transition: opacity 1s;

          // &.next {
          //   z-index: 0;
          //   opacity: 1;
          //   transition: opacity 1s;
        }

        .active {
          opacity: 1;
          transition: opacity 1s;
        }
      }
    }

    .buttons {
      position: absolute;
      display: flex;
      flex-direction: column;
      top: 350px;
      right: 130px;

      li {
        width: 15px;
        height: 15px;
        margin-bottom: 10px;
        border: 2px solid white;
        border-radius: 50%;
        cursor: pointer;

        &.nowImg {
          background-color: #fff;
        }
      }
    }
  }