Vue에서 swiper import 할 때

1. swiper 설치

npm install swiper

 

2. main.js에 import

import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/swiper-bundle.css';
import 'swiper/css';

app.component('Swiper', Swiper);
app.component('SwiperSlide', SwiperSlide);

 

3. 옵션 필요 시 해당 컴포넌트 파일에 import

import { Autoplay, FreeMode } from 'swiper/modules';

return {
	modules: [Autoplay, FreeMode],
}

 

4. 사용할 슬라이드 붙이기

<swiper
    :slides-per-view="3"
    :space-between="10"
    :loop="true"
    :observe-parents="true"
    :observe="true"
    :autoplay="{
      delay: 0,
      disableOnInteraction: false
    }"
    :speed="3000"
    :modules="modules"
    class="MySwiper info-swiper"
    >
      <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>