vue中引入swiper vue-awesome-swiper插件
安装指定版本
npm install vue-awesome-swiper@3.1.3 --save
组件中使用
这里我贴出在页面中使用方法,小伙伴们可以完全复制粘贴,复杂的东西我都简化掉了。 版本: vue@2.6.11,vue-awesome-swiper@3.1.3
<template>
<div class="hello">
<div class="recommendPage">
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</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>
</div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper"
import "swiper/dist/css/swiper.css"
export default {
name: "HelloWorld",
data() {
return {
swiperOption: {
loop: true,
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false
},
// 显示分页
pagination: {
el: ".swiper-pagination",
clickable: true //允许分页点击跳转
},
// 设置点击箭头
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
}
}
},
components: {
swiper,
swiperSlide
},
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);
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
参考地址:https://blog.csdn.net/u012570307/article/details/107203851/
砥砺前行