[Slick-slider] React slick 세팅/간격주기/드래그 중 클릭막기 - 간격주기 / Hover효과 영역[2]

React에서 많이 사용하는 Carousel은 여러가지가 있겠지만, 그 중 직관적이고 많이사용하는 slick slider을 이용해 Carousel을 뽀개..보겠습니다!

사용한 스택 : React / TypeScript / emotion

emotion은 styled-component와 비슷하니 문법만 잘 수정하면됩니다
styled-component를 사용할경우 하나 확인해야할 부분은 반응형 적용부분입니다!

---

목차

1. 슬라이드 세팅
2. 간격주기 / hover 효과 영역
3. 드래그중 클릭 막기

---

간격주기

1. css custom

간격을 주기위해선 slick slide의 css를 수정해줭하는 수밖에 없습니다.

[기본]

//오른쪽으로 20px만큼 간격주기

.slick-list {
	marign-right: -20px;
}

.slick-slide {
	padding-right: 20px;
}

왠지 모르겠지만,, 저는 margin으로 주니까 layout이 깨져서 padding으로 조절해줬습니다.

[hover 효과]

slick slide에는 overflow가 걸려 있어서 각 slide에 hover효과를 줄 시 영역을 넘어가는 효과는 보이지 않게됩니다.

🤔  < overflow를 visible로 바꾸면 되는거 아닌가?

라는 생각이 들 수 있는데 맞습니다. 

저렇게 적용해주면 바로 해결됩니다,, 만! 디자인에서 보여줘야하는 슬라이드 갯수를 제한하고 있을시에 overflow를 visible로 바꿔버리면 

갯수 제한이 의미 없어지게 됩니다.

그럼 어떻게 하면 좋을까요 ?

slide를 감싸고 있는 list에 padding을 줘서 hover효과가 보일 수 있는 영역을 세팅해줍니다.

.slick-list {
	marign-right: -20px;
    //이팩트 크기만큼의 패딩 세팅
    padding: `${props=> props.hoverEffectSize}`
    //이팩트 크기만큼 영역이 움직였을테니 margin을 줘서 제자리로 옴겨준다
	marginLeft: `${props=> props.hoverEffectSize ? -props.hoverEffectSize : 0}`,
    marginTop: `${props=> props.hoverEffectSize ? -props.hoverEffectSize : 0}`,
}

.slick-slide {
	padding-right: 20px;
}