vue中使用swiper插件

vue中使用swiper插件，在pc端和h5端都可以使用。

使用版本

单个文件引入使用版本

"swiper": "^4.0.7",
"vue-awesome-swiper": "^3.1.3",

全局引入使用版本

"swiper": "^5.4.5",
"vue-awesome-swiper": "^4.1.1",

注意，这里版本如果对应不上，会产生错误。

安装

npm install swiper@4.0.7 vue-awesome-swiper@3.1.3 --save

npm install swiper@5.4.5 vue-awesome-swiper@4.1.1 --save

引入

单个文件里引入

import 'swiper/dist/css/swiper.css'
import { swiper,swiperSlide } from 'vue-awesome-swiper'
//在components注册
components: {swiper, swiperSlide},

在main.js中引入

/* 引入swiper */
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper /* { default options with global component } */)

使用

在组件中应用，根据具体情况自行配置，具体参考swiper官方文档

html代码奉上：

<div class="swiper_box">
  <div class="prev">
    <img :src="leftBtn"
        alt=""
        class="swiper-button"
        @click="clickPrev">
  </div>
  <div class="swiper_">
    <swiper ref="mySwiper"
            :options="swiperOptions">
      <swiper-slide class="item-device"
                    v-for="(item, index) in deviceList"
                    :key="index">
        <div class="device">
          <div class="dev-img">
            <img :src="item.img"
                alt="">
          </div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
  <div class="next">
    <img :src="rightBtn"
        alt=""
        class="swiper-button "
        @click="clickNext">
  </div>
</div>

js代码奉上：

swiperOptions: {
    slidesOffsetBefore: 10,
    slidesOffsetAfter: 10,
    slidesPerView: 'auto',
    freeMode: true,
    spaceBetween: 15,
    history: 'love',
    // 设置点击箭头
    navigation: {
      nextEl: '.next',
      prevEl: '.prev',
    },
 },
leftBtn: "",//左边点击按钮图片
rightBtn: ",//右边点击按钮图片
deviceList: require('./device.json').deviceList,//这是轮播图图片数组

computed: {
    swiper () {
      return this.$refs.mySwiper.$swiper
    }
},
methods: {
     /* 前一步 */
    clickPrev () {
      const that = this
      const length = that.deviceList.length
      if (that.activeBtn <= 0 || length == 0) {
        return false
      }
    },
    /* 后一步 */
    clickNext () {
      const that = this
      const length = that.deviceList.length
      if (that.activeBtn >= length - 1 || length == 0) {
        return false
      }
    },
}

css代码奉上：

<style lang="scss" scoped>
.swiper_box {
  width: 100%;
  background: #fff;
  padding: 36px 20px;
  margin-top: 17px;
  > div {
    display: inline-block;
    vertical-align: middle;
  }
  .swiper-button {
    width: 20px;
    height: 20px;
    cursor: pointer;
    text-align: center;
    padding: 0;
    font-weight: 500;
  }
  .swiper_ {
    width: calc(100% - 110px);
    margin: 0 30px;
    .item-device {
      width: 240px;
      .device {
        display: flex;
        .dev-img {
          width: 70px;
          height: 70px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>

实现效果：