감각적 슬라이드 라이브러리 keen-slider.js

'슬라이드'와 같은 기능은 제이쿼리가 각광받은 이유 중의 하나였다. 제이쿼리는 수십 줄의 자바스크립트 코드를 5~6줄로 줄여줬다. 하지만 이제는 5~6줄도 길다. 각 분야에서 제이쿼리보다 훨씬 가볍고 빠른 라이브러리들이 등장했다. keen-slider.js는 그 중의 하나다. 

 

https://keen-slider.io/#installation

keen-slider

keen-slider.js 구현

 

---

CDN

keen-slider.js를 활용하면, 위와 같은 슬라이드 기능을 2~3줄의 코드로 구현할 수 있다. 설치는 CDN 혹은 npm으로 가능하다. css, js파일을 추가해보자. 

 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/keen-slider@4.1.5/keen-slider.min.css"/>

<script src="https://cdn.jsdelivr.net/npm/keen-slider@4.1.3/keen-slider.min.js"></script>

 

 

---

구현

 

keen-slider.js의 기능을 사용하기 위해서는 먼저 인스턴스 객체를 생성해야 한다.(인스턴스 객체생성) 

 

<script>
const slider = new KeenSlider("#my-keen-slider", { loop: true });
</script>

 

이제 <div>태그에 'my-keen-slider'라는 id를 생성하고, keen-slider웹사이트에서 제시한대로 스타일을 집어넣어보자. 

 

<style>
 .number-slide1 {
        background: rgb(64, 175, 255);
        background: linear-gradient(
          128deg,
          rgba(64, 175, 255, 1) 0%,
          rgba(63, 97, 255, 1) 100%
        );
      }

      .number-slide2 {
        background: rgb(255, 75, 64);
        background: linear-gradient(
          128deg,
          rgba(255, 154, 63, 1) 0%,
          rgba(255, 75, 64, 1) 100%
        );
      }
</style>

<div id="my-keen-slider" class="keen-slider">
      <div class="keen-slider__slide number-slide1">1비디오추가</div>
      <div class="keen-slider__slide number-slide2">2비디오추가</div>
 </div>

 

결과는 꽤 만족스러웠다. keen-slider.js는 슬라이드 용도 이외의 분야에도 사용할 수 있을 것으로 같다.