slick 복습

포트폴리오를 만들면서 slick을 많이 썼었는데, 쓴지 오래되어서 기억이 휘발된 거 같아서

다시 한번 복습해볼 겸 포스팅을 해야겠다.

 

리베하얀님의 유튜브 강의를 참고하였다. (🔗)

 

일단 slick을 사용하려면 제이쿼리가 있어야 한다. 파일을 다운받아 직접 연결시켜도 되고, CDN를 직접 연결해도 된다.

(제이쿼리는 제일 위쪽에 위치시켜야 함)

https://releases.jquery.com/

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

나는 이전에는 CDN을 쓰지 않고 직접 파일을 연결하였다.

 

https://kenwheeler.github.io/slick/

슬릭 사이트

 

 

들어가서 get it now를 클릭하면

다운로드 페이지로 이동한다.

cdn과 다운로드버튼이 있다.

 

<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

<script type="text/javascript" src="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

링크 제일 앞에 http: 를 넣어야 한다.

 

 

demos에 들어가면 사용할 수 있는 슬라이드 종류가 나온다.

 

 

기본 구조

  <section class="vertical-center-4 slider">

    <div>

      <img src="http://placehold.it/350x100?text=1">

    </div>

    <div>

      <img src="http://placehold.it/350x100?text=2">

    </div>

    <div>

      <img src="http://placehold.it/350x100?text=3">

    </div>

    <div>

      <img src="http://placehold.it/350x100?text=4">

    </div>

  </section>

section > div > img

 

 

제일 위의 슬라이드를 적용시켜 볼 것이다.

$('.single-item').slick();

js파일에 그대로 복사한 후 연결시킨 뒤

 

<section class="visual"">

    <div>

      <img src="images/background08.jpg" alt="">

    </div>

    <div >

      <img src="images/background08.jpg" alt="">

    </div>

    <div>

      <img src="images/background08.jpg" alt="">

    </div>

  </section>

클래스명을 그대로 section에 연결시킨다. (클래스명은 임의로 설정할 수 있고, visual로 바꾸었다.)

 

확인해보면 이러한 형태로 뜬다.

 

버튼은 기본 형태로, 따로 디자인해주어야 한다.

검사창을 열어 버튼 코드를 확인해 주고,

 

section {width: 1000px; position: relative;}

section div {width: 100%;}

section div img {width: 100%; object-fit: cover;}

button {

  position: absolute;

  width: 50px; height: 50px;

  border-radius: 50%;

  background: rgba(0, 0, 0, 0.3);

  border: none;

  cursor: pointer;

  z-index: 1;

  top: 50%;

  transform: translateY(-50%);

}

button.slick-prev {left: 2%;}

button.slick-next {right: 2%;}

일단 section에 position을 relative로 주고 버튼을 absolute로 설정해 준다.

버튼이 section 위로 전부 올라올 수 있게 z-index를 설정해 준다.

버튼이 section의 중간에 위치하도록 top:50%을 주되, 정확히 위치하게 하려면 transform을 이용하여 tanslateY -50%을 주어야 한다.

나머지 버튼 디자인은 취향껏 만들면 된다.

 

일단 이런 형태로 만들어 주었다.

 

버튼 모양을 화살표 아이콘으로 바꾸어 주는 작업을 할 것이다.

원래는 폰트어썸을 주로 이용하였는데, 리베하얀님은 xeicon이라는 곳을 이용하셔서 한번 이용해봐야겠다

 

https://xpressengine.github.io/XEIcon/

XEIcon, 문자를 그리다

홈페이지 상단의 get start를 클릭하면 나오는 CDN을 이용하면 된다.

 

<link rel="stylesheet" href="http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">

마찬가지로 앞에 http:를 넣어준다

 

상단의 library를 클릭하여 원하는 아이콘을 찾는다.

 

  <i class="xi-angle-left-thin"></i>

  <i class="xi-angle-right-thin"></i>

이와 같은 형태로 html 문서 내에 넣고

content값 확인한 후

button.slick-prev::before {content: "\e93d"; font-family: 'xeicon';}

button.slick-next::before {content: "\e940"; font-family: 'xeicon';}

css에 이와 같이 작성, 폰트 패밀리까지 xeicon으로 적용시켜주어야 한다.

 

button {

  position: absolute;

  width: 50px; height: 50px;

  border-radius: 50%;

  background: rgba(0, 0, 0, 0.2);

  border: none;

  cursor: pointer;

  z-index: 1;

  top: 50%;

  transform: translateY(-50%);

  font-size: 0;

  color: transparent;

}

button.slick-prev {left: 2%;}

button.slick-next {right: 2%;}

button::before {font-family: 'xeicon'; color: #fff; font-size: 30px;}

button.slick-prev::before {content: "\e93d";}

button.slick-next::before {content: "\e940";}

버튼의 폰트사이즈를 0으로 설정한 후 글자색을 투명으로 바꾸어 준다. (글자색만 투명으로 바꾸면 화살표 위치가 뒤틀릴 수 있기 때문에 폰트사이즈를 0으로 해 주어야 한다.)

중복되는 내용을 줄이기 위해 botton::before에 한꺼번에 작성해 주었다.

색상과 폰트사이즈를 적절히 설정하여 준다.

이와 같은 모습이 만들어졌다.

 

 

+도트버튼

 

 

$('.visual').slick({

  dots: true,

});

 

.slick-dots {

  position: absolute;

  bottom: -5%;

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  justify-content: space-between;

}

.slick-dots li button {

  font-size: 0;

  color: transparent;

  width: 12px; height: 12px;

  background: #ccc;

  border-radius: 50%;

  margin: 0 20px;

  border: none;

  cursor: pointer;

}

.slick-dots li.slick-active button {background: #000;}

도트버튼도 설정해보았다.