[Vue.js] Hooper 사용해서 Slider 추가하기

모듈 설치

npm install hooper

# or use yarn
yarn add hooper

hooper을 사용하는 방법은 너무 간단하다

 

[ Hooper 공식문서 ] - 보면 쉽게 설명 되어 있어서 금방 따라 할 수 있음

 

원하는 컴포넌트나 .vue 로 되어있는 파일에 들어가서 

<script> 부분에

<script>
import { Hooper, Slide } from "hooper";
import 'hooper/dist/hooper.css';
export default {
  components: { Hooper, Slide},
  };
</script>

위와 같은 코드를 넣어주면 된다. 

 

그리고 그 위에 <template> 안에

[📍 기본형태 ]

<template>
  <hooper>
    <slide>
      slide 1
    </slide>
    <slide>
      slide 2
    </slide>
  </hooper>
</template>

넣어주면 완전 기본 형태의 slider를 만들수 있고 여러가지를 추가하고 바꿔서 다양하게 바꿀 수 있다.

그건 위에 공식 문서에 있는 example이나 api를 둘러보길 🙂

 

---

 

슬라이드를 template에 추가하는 것이 아니라 data안에 추가해서 v-for를 이용해 slider를 사용할 수 있게했다

 

[ 📍간단하게 바꿔본 것  ]

<template>
  <div>
    <hooper :autoPlay="true" :playSpeed="2000" class="text-center" id="hooper">
      <slide v-for="slide in slides" :key="slide.id" class="slide">
            <p>{{ slide.id }}</p> 
      </slide>
      <hooper-navigation slot="hooper-addons"></hooper-navigation>
    </hooper>
  </div>
</template>

<script>
import { Hooper, Slide, Navigation as HooperNavigation } from "hooper";
import 'hooper/dist/hooper.css';
export default {
  components: { HooperNavigation, Hooper, Slide},
  data() {
    return {
      slides: [
          {id:1},
          {id:2},
          {id:3},
          {id:4},
          {id:5},
          {id:6},
      ]
    };
  }
};
</script>

<style scoped>
* {
  list-style: none;
}
#hooper {
    height: 40vh;
}
.slide {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  font-size: 4rem;
  line-height: 40vh;
}
</style>

: autoPlay - 자동으로 다음 슬라이드로 넘어갈 것인지

: playSpeed - 자동으로 넘어가게 설정할 시간