vue3 swiper 적용해보기

$ npm i swiper

최신 버전의 swiper는

• @/swiper/css in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Swiper.vue?vue&type=script&lang=js&
• swiper/vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Swiper.vue?vue&type=script&lang=js&
  
  
  To install them, you can run: npm install --save @/swiper/css swiper/vue

이라는 에러를 발생하면서 서버가 동작하지 않는다

검색결과
swiper 버전을 낮추라는 것

$ npm i swiper@^6.84

6.84버전으로 설치 후 component에 import도 새로 해주었다

// swiper bundle styles
import 'swiper/swiper-bundle.min.css'

// swiper core styles
import 'swiper/swiper.min.css'

// modules styles
import 'swiper/components/navigation/navigation.min.css'
import 'swiper/components/pagination/pagination.min.css'

다시 서버를 열어보니 에러없이 잘 동작

컴포넌트를 슬라이드로 사용

<swiper-slide>
  <component>
</swiper-slide>

이런식으로 슬라이드에 컴포넌트를 넣어봤더니
display flex가 이상하게 적용 됨
swiper-slide와 관계없는 요소들까지
영향을 끼치면서 레이아웃이 틀어진다

다시 공부 필요..

내일은 Vue3-carousel 이라는 것으로
재설치 해서 해볼 예정