[vue.js] vue-awesome-swiper 라이브러리 설치 및 사용 예제

서론

구글링해도 vue.js 에서 swiper를 사용하는 내용이 별로 없어서 작성해봅니다.

설치

npm i swiper@5.3.7
npm i vue-awesome-swiper

swiper는 6버전 문제가 있어서 5.3.7 버전으로 설치하였습니다.

해당 이슈는 github.com/surmon-china/vue-awesome-swiper/issues/684 로 가면 볼수있다.

 

소스

vue

* 해당 소스는 github.com/surmon-china/surmon-china.github.io/blob/source/projects/vue-awesome-swiper/examples/20-infinite-loop.vue 에서 ex 소스를 사용하였다.

<template>
  <swiper class="swiper" :options="swiperOption">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide>
    <swiper-slide>Slide 7</swiper-slide>
    <swiper-slide>Slide 8</swiper-slide>
    <swiper-slide>Slide 9</swiper-slide>
    <swiper-slide>Slide 10</swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
  </swiper>
</template>

<script>
  import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
  import 'swiper/css/swiper.css'
  export default {
    name: 'swiper-example-loop',
    title: 'Loop mode / Infinite loop',
    components: {
      Swiper,
      SwiperSlide
    },
    data() {
      return {
        swiperOption: {
          slidesPerView: 1,
          spaceBetween: 30,
          loop: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../assets/css/base.scss';
</style>

scss

.swiper {
    height: 300px;
    width: 100%;
  
    .swiper-slide {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      font-weight: bold;
    }
  }

테스트

 

참고 정보

Swiper api : swiperjs.com/swiper-api

Swiper API

Swiper sample source : github.surmon.me/vue-awesome-swiper/

vue-awesome-swiper | Homepage | Surmon's projects