vue.js nuxt.js 에서 swiper 사용하기

1. npm 또는 yarn 으로 터미널로 swiper, vue-awesome-swiper설치 

버전 꼭 확인 !!!!!!

$ npm install swiper@5.3.7 vue-awesome-swiper@4.1.0

$ yarn add swiper@5.3.7 vue-awesome-swiper@4.1.0

 

“swiper”: “^5.3.7”,
“vue-awesome-swiper”: “^4.1.0”,

 

 

2.작업 폴더 > plugins 폴더에 vue-awesome-swiper.js 추가(이름은 자유)

안에 아래 내용입력

import Vue from 'vue';

import VueAwesomeSwiper from 'vue-awesome-swiper';

// import custom style 자기꺼에 맞게 경로 입력 (이경우에 css 폴더안에 스와이퍼 css가 있어야됨)

import '@/assets/css/swiper.css';   

Vue.use(VueAwesomeSwiper);

 

3. nuxt.config.js에 경로추가

  plugins: [

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

  ],

 

 

 

3. 템플릿에 내용추가 

   <div v-swiper:mySwiper="swiperOption" class="swiper-container">

          <div class="swiper-wrapper">

            <div class="swiper-slide">

           

            </div>

            <div class="swiper-slide">

              

            </div>

         

            </div>

          </div>

        </div>

<script>

  export default {

    name: 'flow',

    data() {

      return {

        swiperOption: {

          //반응형

          breakpoints: {

             320: {

              slidesPerView: 2,

              centeredSlides: true,

            },

            360: {

              slidesPerView: 2.2,

              centeredSlides: false,

            },

            480: {

              slidesPerView: 2.5,

            },

            640: {

              slidesPerView: 3.5,

            },

            768: {

              slidesPerView: 4.7,

             

            },

             1024: {

              slidesPerView: 6.2,

            },

            1440: {

              slidesPerView: 7,

            }

          }

        },

      }

    },

  }

</script>

 

 

내가 참고한 사이트 

https://markettraders.kr/swiper-slider/