大佬教程收集整理的这篇文章主要介绍了【在VUE中使用swiper轮播组件】，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
npm install swiper vue-awesome-swiper --save
注意：该安装方法安装的最新版的vue-awesome-swiper（@4），对应的是swiper6，
然而，swiper6仅仅与vue3兼容，swiper6的文档也是英文，问题可能不易解决
所以，我们这里安装vue-awesome-swiper（@3），npm install vue-awesome-swiper --save-dev
按照百度说法，在组件中引入
1 <script> 2 import { swiper, swiperSlide } from "vue-awesome-swiper"; 3 import "swiper/dist/css/swiper.css"; 4 export default { 5 name: 'HelloWorld', 6 components: { 7 swiper, 8 swiperSlide 9 }, 10 data () {34 },40 } 41 </script>
发现VUE保持找不到swiper.css，此刻需要安装swiper、
npm install swiper --save，但是没有带版本，默认安装的时swiper6，依旧有问题
所以
npm install vue-awesome-swiper@3 --save-dev
<template>
<div class="recommendPage">
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="(item, idX) in bAnnerList" :key="idx">
<img :src="item.url" alt="">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
name: 'HelloWorld',
components: {
swiper,
swiperSlide
},
data () {
return {
bAnnerList: [
{
url: require("../../assets/img/bAnner1.png")
},
{
url: require("../../assets/img/bAnner2.png")
},
{
url: require("../../assets/img/bAnner3.png")
},
],
swiperOption: {
// slidesPerView: 1,
loop: true, // 循环模式
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disabLeonInteraction: false
},
speed: 2000,
// effect: 'fade',
// 显示分页
pagination: {
el: ".swiper-pagination",
clickable: true //允许分页点击跳转
},
// 设置点击箭头
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
}
}
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
}
},
mounted() {
// current swiper instance
// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
console.log("this is current swiper instance object", this.swiper);
// this.swiper.slideTo(3, 1000, falsE);
},
created() {
const vm = this;
},
methods: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import "index";
.recommendPage {
width: 100%;
height: 100%;
}
</style>
以上是大佬教程为你收集整理的【在VUE中使用swiper轮播组件】全部内容，希望文章能够帮你解决【在VUE中使用swiper轮播组件】所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。