vue3 swiper
vue3 swiper 적용해보기
$ npm i 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 이라는 것으로
재설치 해서 해볼 예정
Author And Source
이 문제에 관하여(vue3 swiper), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sacultang/vue저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)