VUE中Swiper轮播图的使用

介绍下vue中使用swiper最最靠谱的方法

为了避免大家在使用swiper中入坑，请务必跟我一起，手拉手来操作。下面是我的亲测可用的正确使用方法。

1.安装

cnpm i vue-awesome-swiper@3.1.3 -S

2.引用

//页面引入swiper即可：
import 'swiper/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  	components: {
    swiper,
    swiperSlide
  },
};

3.页面demo-完整代码

<template>
  <div class="swip-view">
    <div id="swiper" @mouseenter="on_bot_enter" @mouseleave="on_bot_leave">
      <swiper class="swiper imgBox" ref="swiper" :options="swiperOption">
        <swiper-slide  v-for="(item,index) in cgList" :key="index" class="imgDiv">
          <div class="li-img">
              <img class="deveimg" :src="item.url" alt="">
          </div>
            <div class="li-name">
              <h4>{{item.name}}</h4>
              <p>{{item.msg}}</p>
              <div class="li-detail">
                <div class="li-detail-l">{{item.date}}</div>
                <div class="li-detail-r" @click="clickDetail">查看详情</div>
              </div>
            </div>
        </swiper-slide>
      </swiper>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </div>
  </div>
</template>

<script>
import 'swiper/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  components: {
    swiper,
    swiperSlide
  },
  name: 'Card',
  props: {
    cgList: {
      type: Array,
      default: () => []
    },
  },
  data () {
    return {
      swiperOption: {
          slidesPerView: 3,
          freeMode: true,
          // centeredSlides: true,
          grabCursor: true,//鼠标光标
          autoplay: {
            delay: 2500,
            disableOnInteraction: false
          },
          // direction: 'horizontal',
          // 设置轮播可循环
          loop : true, 
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          },
        }
    }
  },
  mounted(){
    
  },
  //计算属性，获得可以操作的swiper对象
        computed: {
            swiper() {
            	// mySwiper 是要绑定到标签中的ref属性
                return this.$refs.swiper.swiper
            },
        },
  methods: {
    clickDetail() {
      this.$router.push({
        path: "/demand-detail",
      });
    },
    //通过获得的swiper对象来暂停自动播放
	    	on_bot_enter() {
            this.swiper.autoplay.stop()
        },
        on_bot_leave() {
            this.swiper.autoplay.start()
        },
  }
}
</script>

<style lang="scss" scoped>
    .swiper-button-next {
      right: -40px;
    }
    .swiper-button-prev {
      left: -40px;
    }
.deveimg{
    width: 100%;
    height: 100%;
  }
  // ::v-deep .swiper-wrapper{
  //       width: 90% !important;
  //       margin: auto !important;
  //     }
#swiper {
    width: 100%;
    height: 330px;
    margin: 0 auto;
    // overflow: hidden;
    position: relative;
    .imgBox {
      height: 327px;
      width: 100%;
      list-style: none;
      position: absolute;
      left: 0;
      top: 0;
      overflow: hidden;
      display: flex;
      .imgDiv {
          width: 320px !important;
          border-radius: 5px 5px 5px 5px;
          background: #fff;
          margin: 0 40px !important;
          .li-img{
              width: 320px;
              height: 165px;
              border-radius: 5px 0 0 5px;
              background: skyblue;
          }
          .li-name{
              width: 320px;
              border-radius: 5px 5px 5px 5px;
              // background: rgba(230,230,230,1);
              color: #999999;
              padding: 0 15px;
              h4{
                margin: 25px 0 20px;
                font-weight: 400;
                font-size: 16px;
                color: #333;
              }
              .li-detail{
                display: flex;
                justify-content: space-between;
                margin-top: 40px;
                .li-detail-r{
                  color: #0786DF;
                  cursor: pointer;
                }
              }
          }
      }
    }
  }
</style>

4.大家可以根据自己的页面需求配置options

官网demo地址：[官网示例：](https://github.surmon.me/vue-awesome-swiper/)

5.最终实现结果：

没录屏哈，如你所见，你看到的功能它都有！非常丝滑的卡片式轮播，更加nice的循环轮播。