vue3+swiper

npm install swiper

npm install swiper/vue

Swiper와 Vue용 Swiper 패키지 설치

 

스타일 임포트 해주기

import 'swiper/swiper-bundle.css'

<!-- 
src/main.js 에
 
import 'swiper/swiper-bundle.css'-->
 
<template>
  <div>
    <swiper :modules="[Navigation, Pagination]" navigation pagination>
      <swiper-slide>
        <img src="https://via.placeholder.com/600x300?text=Slide+1" alt="slide1" />
      </swiper-slide>
      <swiper-slide>
        <img src="https://via.placeholder.com/600x300?text=Slide+2" alt="slide2" />
      </swiper-slide>
      <swiper-slide>
        <img src="https://via.placeholder.com/600x300?text=Slide+3" alt="slide3" />
      </swiper-slide>
    </swiper>
  </div>
</template>
 
<script setup>
import { Navigation, Pagination } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/vue'
</script>