本文介绍了vue引入swiper插件，分享给大家，希望对大家有帮助
步骤一：
安装vue，
rush:bash;">
$ npm install vue
步骤二：
创建vue项目
rush:bash;">
# 全局安装 vue-cli
$ npm install -g vue-cli
$ cd my-project
$ npm install
$ npm run dev
上面这些就是安装好vue项目，最主要的就是下面的步骤
步骤三：
下载好swiper相关的js和css，js放在static目录下，css放在assets目录下。
步骤四：
安装runtime：
终端命令：npm install babel-runtime
步骤五：
修改.eslintrc.js文件如下：
rush:js;">
// http://eslint.org/docs/user-guide/con
figuring
module.exports = {
root: true,parser: 'babel-eslint',parserOptions: {
sourceType: 'module'
},env: {
browser: true,},// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
extends: 'standard',// required to lint *.vue files
plugins: [
'html'
],// add your custom rules here
'rules': {
// allow paren-less arrow functions
'arrow-parens': 0,// allow async-await
'generator-star-spacing': 0,// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
},'globals': {
"Swiper": true
} //这个地方是新加入的 全局注入
}
步骤六：
在自己的vue
文件中
添加轮播图
代码
rush:xhtml;">
gallery-top swiper-container-horizontal">
gallery-thumbs swiper-container-horizontal">
rush:js;">
import Swiper from '../../static/swiper-3.4.2.min.js'
let
galleryTop
let
galleryThumbs
export default {
name: 'main',data () {
return {
lbt: [
{
'imgs': '../static/product/lbt1.jpg'
},{
'imgs': '../static/product/lbt2.jpg'
},{
'imgs': '../static/product/lbt3.jpg'
}
]
}
},mounted () {
this.lunbo()
},methods: {
lunbo () {
galleryTop = new Swiper('.
gallery-top',{
nextButton: '.swiper-button-next',prevButton: '.swiper-button-prev',spaceBetween: 10,grabCursor: true,initialSlide: 1,a
utoplay
disableOnIn
teraction: false
})
galleryThumbs = new Swiper('.
gallery-thumbs',{
spaceBetween: 10,a
utoplay: 4000,centeredSlides: true,slidesPerView: 'auto',touchRatio: 0.2,slid
etoClickedSlide: true,a
utoplay
disableOnIn
teraction: false,grabCursor: true
})
galleryTop.p
arams.control =
galleryThumbs
galleryThumbs.p
arams.control =
galleryTop
},stopPlay () {
galleryTop.stopA
utoplay()
galleryThumbs.stopA
utoplay()
},play () {
galleryTop.startA
utoplay()
galleryThumbs.startA
utoplay()
}
}
}
rush:css;">
@import url("../assets/swiper-3.4.2.min.css");
.
gallery-top{
height:32rem;
width:100%;
}
.
gallery-thumbs{
height:20%;
Box-sizing:border-
Box;
padding:10px 0;
background: rgba(0,0.4);
cursor: pointer;
}
.
gallery-thumbs .swiper-slide{
width:30%;
height:6rem;
opacity:0.3;
}
.
gallery-thumbs .swiper-slide-active{
opacity:1;
}
.swiper-slide{
background-size: 100% 160%;
-webkit-background-size: 100% 160%;
}
这里还有一个很重要的问题，在模板里面设置背景图，写法应该是
rush:js;">
v-bind:style="{backgroundImage: 'url(' + value.imgs + ')'}"
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
