[항해99 81일차] 2022.05.26 TIL (slick slider arrow 버튼 커스텀)

오늘은 배포하고..

 

이미지 많을 때 swiper 점.........많이 찍히는거........좀 징그러워요...ㅎㅎ

이러한 피드백을 받아서 반영했다 !!!

 

 

하핫..조금 징그럽긴 했었다.ㅠㅠ

ㅋㅋㅋㅋ이미지 수대로 도트가 나와버리니까~ 징그러울수밖에 ㅠㅠ

 

이것을 이렇게 바꿔버렸다 !!

슬릭 슬라이더 코드

 

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";

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

  const settings = {
    infinite: true,
    speed: 500,
    slideToShow: 1,
    slideToScroll: 1,
    autoplay: false,
    autoplaySpeed: 5000,
    dots: false,
    nextArrow: (
      <Div>
        <Next />
      </Div>
    ),
    prevArrow: (
      <DivPre>
        <Prev />
      </DivPre>
    ),
  };
  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;
  }
`;
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;

이 코드를 통해 기본적인 슬릭 슬라이더에 있는 화살표 버튼을 없애버려야된다.ㅠㅠ

이거 찾느라 고생 좀 했닼ㅋㅋㅋㅋ

개발자 도구에서 요소 영역 확인해서 보면 해결되는 거였는데..ㅎㅎㅎ

  .slick-prev::before,
  .slick-next::before {
    opacity: 0;
    display: none;
  }

이렇게 화살표 버튼을 커스텀했다!

코드는 몇줄 안되는데 ㅠㅠ

찾느라 고생했다.

 

라이브러리는 디자인이 없을때 그냥 가져다 쓰기 편한 것 같다..

디자인에 맞춰서 커스텀하는 건 넘 나 어려워!

차라리 하드코딩을 하는 것이 .. 더 좋을지도ㅠㅠ

실력을 키워야겠다 !!!