vue引入swiper插件

Posted 2020-09-16

 

1. 步骤一：安装vue，  
2.            $ npm install vue  
3. 步骤二：创建vue项目  
4.           # 全局安装 vue-cli  
5.           $ npm install -g vue-cli  
6.           $ cd my-project  
7.           $ npm install  
8.           $ npm run dev  

上面这些就是安装好vue项目，最主要的就是下面的步骤

 

 

1. 步骤三：下载好swiper相关的js和css，js放在static目录下，css放在assets目录下。  

 

1. 步骤四：  
2. 安装runtime：  
3. 终端命令：npm install babel-runtime  

 

1. 步骤五：  
2. 修改.eslintrc.js文件如下：  
3. // http://eslint.org/docs/user-guide/configuring  
4.   
5. module.exports = {  
6.   root: true,  
7.   parser: ‘babel-eslint‘,  
8.   parserOptions: {  
9.     sourceType: ‘module‘  
10.   },  
11.   env: {  
12.     browser: true,  
13.   },  
14.   // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style  
15.   extends: ‘standard‘,  
16.   // required to lint *.vue files  
17.   plugins: [  
18.     ‘html‘  
19.   ],  
20.   // add your custom rules here  
21.   ‘rules‘: {  
22.     // allow paren-less arrow functions  
23.     ‘arrow-parens‘: 0,  
24.     // allow async-await  
25.     ‘generator-star-spacing‘: 0,  
26.     // allow debugger during development  
27.     ‘no-debugger‘: process.env.NODE_ENV === ‘production‘ ? 2 : 0  
28.   },  
29.   ‘globals‘: {  
30.     "Swiper": true  
31.   }   //这个地方是新加入的   全局注入  
32. }  

 

1. 步骤六：在自己的vue文件中添加轮播图代码  

 

1. <div v-on:mouseenter="stopPlay()" v-on:mouseleave="play()" class="swiper-container gallery-top swiper-container-horizontal">  
2.     <div class="swiper-wrapper">  
3.        <div v-for="value in lbt" class="swiper-slide swiper-slide-next" style="width: 100%; margin-right: 10px;" v-bind:style="{backgroundImage: ‘url(‘ + value.imgs + ‘)‘}"></div>  
4.     </div>  
5.     <div class="swiper-button-next swiper-button-white"></div>  
6.     <div class="swiper-button-prev swiper-button-white swiper-button-disabled"></div>  
7. </div>  
8. <div class="swiper-container gallery-thumbs swiper-container-horizontal">  
9.     <div class="swiper-wrapper">  
10.         <div v-for="value in lbt" class="swiper-slide swiper-slide-next" style="margin-right: 10px;" v-bind:style="{backgroundImage: ‘url(‘ + value.imgs + ‘)‘}"></div>  
11.     </div>  
12. </div>  

 

 

1. import Swiper from ‘../../static/swiper-3.4.2.min.js‘  
2. let galleryTop  
3. let galleryThumbs  
4. export default {  
5.   name: ‘main‘,  
6.   data () {  
7.     return {  
8.       lbt: [  
9.         {  
10.           ‘imgs‘: ‘../static/product/lbt1.jpg‘  
11.         }, {  
12.           ‘imgs‘: ‘../static/product/lbt2.jpg‘  
13.         }, {  
14.           ‘imgs‘: ‘../static/product/lbt3.jpg‘  
15.         }  
16.       ]  
17.     }  
18.   },  
19.   mounted () {  
20.     this.lunbo()  
21.   },  
22.   methods: {  
23.     lunbo () {  
24.       galleryTop = new Swiper(‘.gallery-top‘, {  
25.         nextButton: ‘.swiper-button-next‘,  
26.         prevButton: ‘.swiper-button-prev‘,  
27.         spaceBetween: 10,  
28.         grabCursor: true,  
29.         initialSlide: 1,  
30.         autoplayDisableOnInteraction: false  
31.       })  
32.       galleryThumbs = new Swiper(‘.gallery-thumbs‘, {  
33.         spaceBetween: 10,  
34.         autoplay: 4000,  
35.         initialSlide: 1,  
36.         centeredSlides: true,  
37.         slidesPerView: ‘auto‘,  
38.         touchRatio: 0.2,  
39.         slideToClickedSlide: true,  
40.         autoplayDisableOnInteraction: false,  
41.         grabCursor: true  
42.       })  
43.       galleryTop.params.control = galleryThumbs  
44.       galleryThumbs.params.control = galleryTop  
45.     },  
46.     stopPlay () {  
47.       galleryTop.stopAutoplay()  
48.       galleryThumbs.stopAutoplay()  
49.     },  
50.     play () {  
51.       galleryTop.startAutoplay()  
52.       galleryThumbs.startAutoplay()  
53.     }  
54.   }  
55. }  

[css] view plain copy

 

 

1. @import url("../assets/swiper-3.4.2.min.css");  
2. .gallery-top{    
3.     height:32rem;    
4.     width:100%;  
5. }    
6. .gallery-thumbs{    
7.     height:20%;    
8.     box-sizing:border-box;    
9.     padding:10px 0;    
10.     background: rgba(0, 0, 0, 0.4);  
11.     cursor: pointer;  
12. }    
13. .gallery-thumbs .swiper-slide{    
14.     width:30%;    
15.     height:6rem;    
16.     opacity:0.3;    
17. }    
18. .gallery-thumbs .swiper-slide-active{    
19.     opacity:1;   
20. }   
21. .swiper-slide{  
22.   background-size: 100% 160%;  
23.   -webkit-background-size: 100% 160%;  
24. }  

这里还有一个很重要的问题，在模板里面设置背景图，写法应该是

[html] view plain copy

1. v-bind:style="{backgroundImage: ‘url(‘ + value.imgs + ‘)‘}"