vue开发:vue-cli引入swiper

1:下载需要 swiper 的js文件和css文件

http://www.swiper.com.cn/
   
   
  • 1

2:下载好swiper相关的js和css,js放在static目录下,css放在assets目录下。

3:安装runtime:

npm install babel-runtime 
   
   
  • 1

4:修改.eslintrc.js文件如下: 最后一行添加

 'globals': {
        "Swiper": true
    } //这个地方是新加入的   全局注入
   
   
  • 1
  • 2
  • 3

5: vue模板中引入 swiper.min.js

import Swiper from '@/../static/js/swiper.min.js';
   
   
  • 1

6: vue模板中引入 swiper-3.4.2.min.css

@import url("../../assets/css/swiper-3.4.2.min.css");
   
   
  • 1

7: html 结构

    <!-- Swiper -->
    <div class="home_banner">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
              <img src="./../../assets/img/sec_3_top_2@2x.jpg">
          </div>
          <div class="swiper-slide">
              <img src="./../../assets/img/sec_3_top_2@2x.jpg">
          </div>
          <div class="swiper-slide">
              <img src="./../../assets/img/sec_3_top_2@2x.jpg">
          </div>
        </div>
      </div>
    </div>
    <!-- Swiper end  -->
   
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

8:vue js

  mounted() {
    var mySwiper = new Swiper('.home_banner .swiper-container', {
      direction: 'horizontal',
      loop: true
    });
    // Swiper 推荐课程
    var swiper2 = new Swiper('.course_swiper_wrap .swiper-container', {
      slidesPerView: 3,
      paginationClickable: true,
      nextButton: '.swiper-button-next-01',
      prevButton: '.swiper-button-prev-01',
      spaceBetween: 30,
      freeMode: true,
      loop: true
    });
  }
   
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值