swiper

vue+swiper使用

安装下载

npm install swiper vue-awesome-swiper --save
//npm install swiper vue-awesome-swiper @v2.6.7--save

main.js引入

// 引入swiper
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
//挂载到vue上
Vue.use(VueAwesomeSwiper)

组件封装

<template>
  <div class="swiper">
    <swiper
      :options="swiperOptions"
      ref="mySwiper"
    >
      <swiper-slide
        :key='item.id'
        v-for="item in swiperList"
      ><img :src="item.imgurl"></swiper-slide> 
     <swiper-slide>
       <!--  <li>
          <img
            src="../../../public/img/首页_slices/ban_1.png"
            alt=""
          >
          <h3>2020年北部湾银行校园招聘计划</h3>
          <p><span>简历接受中</span><span>发布于2020-09-09</span></p>
          <p>接收截止时间：2020-09-23</p>
        </li>
      </swiper-slide>-->

    </swiper>
    <div
      class="swiper-button-prev "
      @click="prev"
    >
      <img
        src="../../../public/img/首页_slices/xiangyou-3 拷贝.png"
        class="prev"
      >
    </div>
    <div
      class="swiper-button-next "
      @click="next"
    > <img
        src="../../../public/img/首页_slices/xiangyou-3.png"
        class="next"
      ></div>
  </div>

  </div>
</template>

<script>
export default {
  // 组件名称
  name: 'swiperHome',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data () {
    return {
      swiperOptions: {
        // pagination: '.swiper-pagination',
        loop: true,//循环
        loopAdditionalSlides: 2,//循环前后复制个数
        autoplay: 2500, //开启自动翻页功能
        // autoplayDisableOnInteraction:true   //在我们对swiper页面进行操作之后是否继续进行翻页
        // watchSlidesVisibility: true,//
        slidesPerView: 3,   //分组显示
        // spaceBetween: 15,    //页面间隙
        centeredSlides: true, //页面居中
        // slidesPerView:'auto',
        mousewheelControl: true  //开启鼠标控制翻页的属性

      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",

      },
      swiperList: [
        {
          id: '01',
          imgurl: require('../../../public/img/首页_slices/ban_1.png')
        },
        {
          id: '02',
          imgurl: require('../../../public/img/首页_slices/ban_1.png')
        },
        {
          id: '03',
          imgurl: require('../../../public/img/首页_slices/ban_1.png')
        }
      ]
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  created () { },
  mounted () { },
  // 组件方法
  methods: {
    // 前进后退按钮

    prev () {
      // console.log(this.$refs.mySwiper.swiper);
      this.$refs.mySwiper.swiper.slidePrev()
    },
    next () {
      this.$refs.mySwiper.swiper.slideNext()
    }
  }
}
</script>

<style scoped lang="scss">
.swiper {
  position: relative;
  width: 1180px;
  height: 392px;
  background-color: red;
  margin: 0 auto;
}
.swiper-button-prev:after,
.swiper-button-next:after {
  display: none;
}
.prev {
  width: 70px;
  height: 70px;
  // margin: 0 auto;
  position: absolute;
  left: -110px;
  // top: 158px;
}
.next {
  width: 70px;
  height: 70px;
  position: absolute;
  left: 63px;
  // top: 158px;
}
</style>