vue3中swiper的使用
vue3中swiper的使用,注意版本的问题
·
vue版本: "vue": "^3.2.13",
"@vue/cli-service": "~5.0.0",
"swiper": "^6.5.6",
1.安装swiper指定版本
npm install swiper@6.5.6 --save
2.在需要使用swiper的组件中引入swiper
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";
3.引入css文件
// Import style (>= Swiper 6.x)
import "swiper/swiper-bundle.css";
4.在模板文件中使用
<swiper class="swiper-container" :navigation="{ nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }" :pagination="{ clickable: true }" :autoplay="{ autoplay: true }" loop> <swiper-slide><img src="@/assets/logo.png" alt="">{{num}}</swiper-slide> <swiper-slide><img src="@/assets/logo.png" alt="">222</swiper-slide> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 左右箭头。如果放置在swiper-container外面,需要自定义样式。--> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 如果需要滚动条 --> <!-- <div class="swiper-scrollbar"></div> --> </swiper>
5.再按需导入使用swiper中的对应的模块
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y, Autoplay, } from "swiper"; SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Autoplay]) export default { components: { Swiper, SwiperSlide } }
更多推荐
已为社区贡献3条内容
所有评论(0)