[항해99 85일차] 2022.05.30 TIL (인스타그램 이미지 슬라이더 매직도트 css커스텀)

 

ㅠㅠ 저거..정말 많이 찾았는데..

매직 도트라는 라이브러리가 있었다 !!!

 

매직 도트 깃허브

 

누군가가 잘..만들어놓았다..

나도 나중엔 꼭 하드코딩으로 해봐야지 !!

 

yarn add react-magic-slider-dots

 

우선 라이브러리 설치를 먼저 해준다.

 

슬릭 슬라이더 컴포넌트

 

import React from "react";
import styled from "styled-components";
import Slider from "react-slick";
/* import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css"; */
import { ReactComponent as Next } from "../../assets/next.svg";
import { ReactComponent as Prev } from "../../assets/prev.svg";
import MagicSliderDots from "react-magic-slider-dots";

const SlickSlider = (props) => {
  const { children } = props;

  const settings = {
    infinite: true,
    speed: 500,
    slideToShow: 1,
    slideToScroll: 1,
    autoplay: false,
    autoplaySpeed: 5000,
    dots: true,
    nextArrow: (
      <Div>
        <Next />
      </Div>
    ),
    prevArrow: (
      <DivPre>
        <Prev />
      </DivPre>
    ),
    appendDots: (dots) => {
      return (
        <MagicSliderDots
          dots={dots}
          numDotsToShow={4}
          dotWidth={30}
          dotContainerClassName="dotContainer"
        />
      );
    },
  };
  return (
    <React.Fragment>
      <StyledSlider {...settings}>{children}</StyledSlider>
    </React.Fragment>
  );
};
const StyledSlider = styled(Slider)`
  height: 260px;
  width: 100%;
  position: relative;
  .slick-prev::before,
  .slick-next::before {
    opacity: 0;
    display: none;
  }
  .slick-slide div {
    //슬라이더  컨텐츠
    cursor: pointer;
  }
  .dotContainer {
    top: -35px;
    display: flex;
    width: 180px;
  }
  .dotContainer ul {
    padding: 0;
    display: flex;
    transition: all 0.2s;
    position: relative;
    margin: 0;
  }
  .dotContainer li {
    padding-left: 25px;
  }
  .dotContainer li button {
    font-size: 0px;
  }
  .dotContainer li button::before {
    display: block;
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.5);
    transition: 0.35s;
  }
  .dotContainer li.slick-active button::before {
    background-color: #fff;
    transform: scale(2);
    border-radius: 4px;
  }
  .dotContainer li.small button:before {
    font-size: 8px;
    line-height: 20px;
  }
`;
const Div = styled.div`
  width: 30px;
  height: 30px;
  position: absolute;
  right: 16px;
  z-index: 99;
  text-align: right;
  line-height: 30px;
`;
const DivPre = styled.div`
  width: 30px;
  height: 30px;
  position: absolute;
  left: 16px;
  z-index: 99;
  text-align: left;
  line-height: 30px;
`;
export default SlickSlider;

 

내가 건들인 것은 도트 컨테이너의 className 

맨처음에 적용했었을 때는 ㅠㅠ아래로 들어가서 화면에 보이지 않았었다.ㅎㅎ

 

세팅에 있는 dots를 true로 바꿔주고, 

dots: true,
 appendDots: (dots) => {
      return (
        <MagicSliderDots
          dots={dots}
          numDotsToShow={4}
          dotWidth={30}
          dotContainerClassName="dotContainer"
        />
      );
    },

매직 슬라이더 도트 컴포넌트 안에 도트 컨테이너 클레스 네임을 내가 지정해준다.

그리고 나는 css만 살짝 변경했다 !!

ㅠ.ㅠ 나중엔 나도 만들어봐야지 !!