(HTML / CSS / jQuery) slick 예제, slick 슬라이드 기본 예제 (기본 margin 주는 법)

slick.js

See the Pen slick 기본 margin by kimyangsun (@kimyangsun) on CodePen.

https://codepen.io/kimyangsun/pen/mdJRVwX?editors=1100

slick 기본 margin

slick 슬라이더에 아이템 사이의 margin 을 준 기본 예제입니다.

 

owl 캐러셀 플러그인은 스크립트 자체 코드에 패딩을 주는 코드가 있는데,

 

그거와는 다르게 slick 슬라이더는 css로 아이템 사이에 margin을 넣어주어야 합니다.

 

slick 을 적용하면 자체적으로 생겨나는 .slick-slide 클래스에 마진을 넣어주고 줄어든 전체 너비를 다시 보정해주기 위해

 

.slcik-slide 의 부모인 .slick-list 에 margin 을 음수(-) 로 넣어줘서 맞춰줍니다.

 

이상 slick 슬라이더 기본 예제, margin 넣는 법 이었습니다.