[ITSkeleton][nuxt.js] vue-awesome-swiper 사용하기

vue-awesome-swiper

https://www.npmjs.com/package/vue-awesome-swiper

vue-awesome-swiper

nuxt에서의 사용방법은

 

config파일에

 

plugins: [{ src: '@/plugins/vue-awesome-swiper', mode: 'client' }]

css: [ 'swiper/css/swiper.css' ]

을 적어줍니다(이미 존재한다면 뒤의 코드를 추가해주시면 됩니다)

 

적어두었다면

 

plugins에 vue-awesome-swiper.js 파일을 만들어줍니다.

 

vue-awesome-swiper.js 파일에

 

import Vue from 'vue'

import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper)

 

을 적어줍니다.

 

사용방법은 크게 두가지로 되어있습니다.

 

<client-only>
      <swiper
        ref="carousel"
        class="swiper"
        :options="swiperOptions"
        @ready="onSwiperRedied"
        @clickSlide="onSwiperClickSlide"
        @slideChangeTransitionStart="onSwiperSlideChangeTransitionStart"
      >
        <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>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </client-only>

서버에서 렌더링해서 보내는것이 아닌 클라이언트가 생성되면서 만들어지는 방식.

 

<div
      class="swiper"
      v-swiper:myDirectiveSwiper="swiperOptions"
      @ready="onSwiperRedied"
      @click-slide="onSwiperClickSlide"
      @slide-change-transition-start="onSwiperSlideChangeTransitionStart"
    >
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="index in 6" :key="index">
          <span>Slide {{ index }}</span>
        </div>
      </div>
      <div class="swiper-pagination swiper-pagination-bullets"></div>
    </div>
  </div>

서버에서 렌더링 되어서 나오는 방식

 

주의할점은 서버에서 렌더링 되어서 나오는 방식은 css를 통해 숨기거나 다시 나타내었을때 정상적인 동작을 하지 않을 가능성이 큽니다.. 실제로 많이 당했구요..

 

<script>
  export default {
    name: 'swiper-nuxt',
    data () {
      return {
        swiperOptions: {
          loop: true,
          slidesPerView: 'auto',
          centeredSlides: true,
          spaceBetween: 30,
          pagination: {
            el: '.swiper-pagination',
            dynamicBullets: true
          }
        }
      }
    },
    methods: {
      onSwiperRedied(swiper) {
        console.log('Swiper redied!', swiper)
      },
      onSwiperSlideChangeTransitionStart() {
        console.log('SwiperSlideChangeTransitionStart!')
      },
      onSwiperClickSlide(index, reallyIndex) {
        console.log('Swiper click slide!', reallyIndex)
      }
    }
  }
</script>

스크립트는 위와 같이 작성해주시면 됩니다.

 

직접 한번 돌려보면서 어떤값이 나오는지 어떤값이 들어가는지 직접 확인해보세요!