[Vue.js] vue-carousel 사용법 및 navigation custom

vue-carousel 사용법과 navigation을 커스텀하는 방법에 대해 알아보겠습니다.

(vue 2 버전, vue-carousel 0.18.0 버전 사용)

 

---

 

1. vue-carousel 공식 문서

GitHub : https://github.com/SSENSE/vue-carousel

Guide : https://ssense.github.io/vue-carousel/guide/

 

 

2. npm install

npm install vue-carousel --save

 

 

3. import vue-carousel

import { Carousel, Slide } from "vue-carousel";

.
.
components: { Carousel, Slide },
.
.

- 캐러셀을 사용하려는 컴포넌트에 import 했습니다.

 

 

4. HTML

<carousel
  class="info-carousel"
  :per-page="1"
  :navigation-enabled="true"
  navigationNextLabel=""
  navigationPrevLabel=""
>
  <slide class="info-slide">
    <section class="no-data">정보가 없습니다 1</section>
  </slide>
  
  <slide class="info-slide">
    <section class="no-data">정보가 없습니다 2</section>
  </slide>
  
  <slide class="info-slide">
    <section class="no-data">정보가 없습니다 3</section>
  </slide>
</carousel>

- per-page 값을 1로 줘서 한번에 하나씩 보여주도록 설정했습니다.

- navigation-enabled를 true로 줘서 네이게이션을 사용할 수 있게 했습니다.

- navigationNextLabel과 navigationPrevLabel에 빈 값을 줘서 기본 화살표 표시가 사라지게 했습니다.

 

- carousel 안에 슬라이드는 3개를 넣었습니다.

- slide 태그에 v-for문을 이용하여 넣을 수도 있습니다.

 

 

5. CSS style

<style lang="scss">
.info-carousel {
  .VueCarousel-wrapper {
    flex: 1 1 auto !important;
    height: 100% !important;
  }
  .VueCarousel-inner {
    height: calc(100% - 1vmin) !important;
  }
  .VueCarousel-pagination {
    display: none !important;
  }

  .VueCarousel-navigation-button {
    height: 0 !important;
    width: 0 !important;
    top: -10% !important;
    left: 38% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .VueCarousel-navigation-button::before {
    content: "" !important;
    position: absolute !important;
  }
  .VueCarousel-navigation-button:focus {
    outline: none !important;
  }
  
  .VueCarousel-navigation-next::before {
    position: absolute !important;
    width: 2.78vmin !important;
    height: 2.6vmin !important;
    background-image: url("~@/assets/images/s_btn.png") !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    transform: rotate(180deg);
    cursor: pointer !important;
    image-rendering: -webkit-optimize-contrast !important;
  }
  .VueCarousel-navigation-next:hover::before {
    background-image: url("~@/assets/images/s_btn_active.png") !important;
  }
  
  .VueCarousel-navigation-prev {
    left: 31% !important;
  }
  .VueCarousel-navigation-prev::before {
    position: absolute !important;
    width: 2.78vmin !important;
    height: 2.6vmin !important;
    background-image: url("~@/assets/images/s_btn.png") !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    cursor: pointer !important;
    image-rendering: -webkit-optimize-contrast !important;
  }
  .VueCarousel-navigation-prev:hover::before {
    background-image: url("~@/assets/images/s_btn_active.png") !important;
  }
  
  .VueCarousel-navigation--disabled:hover::before {
    background-image: url("~@/assets/images/s_btn.png") !important;
    cursor: default !important;
  }
}
</style>

- vue-carousel의 스타일을 바꾸려면 일단 scoped로 설정하면 안 됩니다.

- 이전 화살표와 다음 화살표 이미지는 각각 버튼의 ::before에 넣어주면 됩니다.

(.VueCarousel-navigation-prev, .VueCarousel-navigation-next)

 

- 위 코드는 제 화면에 맞게 커스텀한 스타일이기 때문에 알맞게 수정하여 사용하면 됩니다.

 

 

 

이상으로 vue-carousel 사용법과 navigation을 커스텀하는 방법에 대해 알아보았습니다.

---