1. vue awesome swiper

安装

vue-awesome-swiper要和swiper配合使用

npm：

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

package.json：

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

注意版本

此处版本是个坑，版本不匹配，文件路径都不一致，肯定会有问题！！
不说明版本的demo都是耍流氓！！

代码如下

<template>
  <div class="pc-game mt-20" @mouseover="btnHover = true" @mouseleave="btnHover = false">
    <div class="pc-game-title mt-20 mb-20">
      <a href="" class="text-aaa">查看全部</a>
    </div>
    <div @mouseenter="on_bot_enter" @mouseleave="on_bot_leave">
      <swiper class="swiper" ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="(item,index) in arr" :key="index">
          <img :src="tymydImg" alt="">
          <div class="text-565 img-text f14">{{ item.text }}</div>
        </swiper-slide>
      </swiper>
    </div>
    <div :class="['prev-next', {'show':btnHover}]">
      <button type="button" slot="button-prev" class="prev el-carousel__arrow el-carousel__arrow--left"><i class="el-icon-arrow-left"></i>
      </button>
      <button type="button" slot="button-next" class="next el-carousel__arrow el-carousel__arrow--right"><i class="el-icon-arrow-right"></i>
      </button>
    </div>
  </div>
</template>

<script>
import {Swiper, SwiperSlide} from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
  name: "pcGame",
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      /**
       * 前进后退按钮
       */
      btnHover: false,
      arr: [
        {
          text: '天涯明月刀'
        },
        {
          text: '天涯明月刀'
        },
        {
          text: '天涯明月刀'
        },
        {
          text: '天涯明月刀'
        },
        {
          text: '天涯明月刀'
        },
        {
          text: '天涯明月刀'
        }
      ],
      swiperOptions: {
        slidesPerView: 6,
        spaceBetween: 5,
        speed: 2000,//匀速时间
        autoplay: {
          delay: 1000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        loop: true,
        freeMode: false,
        freeModeMomentum: true,
        navigation: {
          nextEl: '.prev',
          prevEl: '.next',
          hideOnClick: true
        }
      }
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper
    }
  },
  methods: {
    // 移出
    on_bot_leave() {
      this.swiper.autoplay.start();
    },
    // 移入
    on_bot_enter () {
      this.swiper.autoplay.stop()
    }
  }
}
</script>

<style lang="scss">

.pc-game {
  background-color: #fff;
  overflow: hidden;
  position: relative;

  .pc-game-title {
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
  }

  .swiper {
    width: 1090px;
    padding: 15px;
    overflow: hidden;
    border-radius: 5px;
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      cursor: pointer;
      transition: all 0.3s;
      a {
        width: 100%;
        img {
          background: #dcdcdc;
          border-radius: 5px;
          height: 130px;
          box-shadow: 0 2px 13px 0 rgba(0, 0, 0, .06);

          &:hover {
            box-shadow: 0 2px 13px 0 #4A90E2;
          }
        }

        .img-text {
          margin-top: 20px;
          display: inline-block;
        }
      }

      &:hover {
        transform: scale(1.1);
      }
    }

    .swiper-slide:nth-child(2n) {
      width: 40%;
    }

    .swiper-slide:nth-child(3n) {
      width: 20%;
    }
  }
  .prev-next {
    transition: opacity .3s;
    opacity: 0;
    .prev,.next {
      background: #a2a2a2;
      position: absolute;
      top: 150px;
      &:hover {
        background: rgba(31,45,61,.23);
      }
    }
  }
  .show {
    opacity: 1 !important;
  }

}
</style>

2. swiper原生使用

这里我们使用的是s3，地址如下： https://3.swiper.com.cn/

npm:

npm install swiper@3.4.2 --save

package.json：

"swiper": "^3.4.2",

使用方法

import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'

    mounted() {
        const galleryTop = new Swiper('.gallery-top', {
            loop: true,
            loopedSlides: 5,
            slidesPerView: 'auto',
            spaceBetween: 10,
            watchSlidesVisibility: true,//防止不可点击
            prevButton: '.swiper-button-thumbs-prev',
            nextButton: '.swiper-button-thumbs-next',
        });
        const galleryThumbs = new Swiper('.gallery-thumbs', {
            centeredSlides: true,
            touchRatio: 0.2,
            loop: true,
            loopedSlides: 5,
            slidesPerView: 'auto',
            spaceBetween: 10,
            watchSlidesVisibility: true,//防止不可点击
            slideToClickedSlide: true
        });
        galleryTop.params.control = galleryThumbs;
        galleryThumbs.params.control = galleryTop;
    },