세로 슬라이더

 

npm i styled-components
npm i slick-carousel
npm i react-slick

 

import styled from "styled-components";
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import { PlayerSelectAtom } from "../../atom/PlayerSelectAtom";
import { useRecoilState } from 'recoil';

const VerticalSlider = () => {

  const settings = {
    arrows: false,
    infinite: false,
    slidesToShow: 4,
    slidesToScroll: 2,
    vertical: true,
    verticalSwiping: true,
  };
  
  /* User Info */
  const [selPlayer, setSelPlayer] = useRecoilState(PlayerSelectAtom);
  const PlayerImgList = ["/selectPlayer/m1Img.png", "/selectPlayer/f11Img.png", "/selectPlayer/m31Img.png", "/selectPlayer/f20Img.png", "/selectPlayer/m11Img.png", "/selectPlayer/f12Img.png", "/selectPlayer/m14Img.png", "/selectPlayer/f14Img.png", "/selectPlayer/m29Img.png", "/selectPlayer/f21Img.png", "/selectPlayer/m28Img.png", "/selectPlayer/f22Img.png"];

  return (
    <div className="absolute z-30 left-6 w-[12%]">
      <StyledSlider {...settings} className="h-[100%] mt-2">
        {PlayerImgList.map((img, index)=>{
          return(
            <div key={index}
              className={selPlayer==index?`rounded-xl mt-3 shadow-md bg-[#BDA4D5] h-[160px]`:`rounded-xl mt-2 shadow-md bg-white h-[160px] opacity-60`} onClick={()=>setSelPlayer(index)}> {/**1부터 시작하는 id */}
              <img className="rounded-xl w-[100%] h-[100%]" src={img} />
            </div>
          )
        })}       
      </StyledSlider>
    </div>
  );
};
const StyledSlider = styled(Slider)`

  .slick-prev {
    z-index: 30;
    left: 30px;
  }

  .slick-next {
    z-index: 30;
    right: 40px;
  }

  .slick-prev:before,
  .slick-next:before {
    font-size: 30px;
    opacity: 0.5;
    color: white;
  }

  .slick-dots {
    display: flex;
    justify-content: center;
    bottom: 30px;
    color: white;

    li button:before {
      color: white;
    }

    li.slick-active button:before {
      color: white;
    }
  }
  .slick-slider {
    .slick-list {
      .slick-slide {
        div {
          // beforeChange 이벤트 핸들러 정의
          .slick-slide-inner {
            .slick-slide {
              &:beforeChange {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
  }
`;

export default VerticalSlider;

 

한 줄에 4개씩 보이고, 마우스로 내릴 때마다 2개씩 보임