vue2.0 引入Swiper

一、安装配置

名称	版本号
swiper	5.x
vue-awesome-swiper	3.1.3

1、安装命令：

npm install swiper@5.x vue-awesome-swiper@3.1.3 --save-dev

二、在main.js里引入：

关键代码：

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css';

Vue.use(VueAwesomeSwiper)

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css';

Vue.use(VueAwesomeSwiper)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

三、在页面里使用：

<template>
  <div>
    <swiper
      class="my_swiper"
      :options="swiperOption"
      @mouseover.native="handleAuto(true)"
      @mouseleave.native="handleAuto(false)"
    >
      <swiper-slide v-for="(item,index) in picList" :key="index" @click.native="handleSwiper"><img :src="item.pic_src" alt="" :data-path="item.pic_src" data-yaya="图片"></swiper-slide>

      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 图片数据
      picList:[
        { pic_src:'https://t7.baidu.com/it/u=1423490396,3473826719&fm=193&f=GIF' },
        { pic_src:'https://t7.baidu.com/it/u=4158958181,280757487&fm=193&f=GIF' },
        { pic_src:'https://t7.baidu.com/it/u=602106375,407124525&fm=193&f=GIF' },
        { pic_src:'https://t7.baidu.com/it/u=3915743384,2060495762&fm=193&f=GIF' },
        { pic_src:'https://t7.baidu.com/it/u=55748064,2074988836&fm=193&f=GIF' },
      ],
      // Swiper 配置项
      swiperOption: {
        direction: 'horizontal', // Swiper的滑动方向,可设置为水平方向切换 horizontal（默认） 或垂直方向切换 vertical 
        slidesPerView: 1, // Swiper的列数
        // spaceBetween: 30, //板块间距
        // 设置分页器
        pagination: {
          el: ".swiper-pagination",
          type: 'bullets',//将分页的类型改为圆点（默认)
          clickable: true,// 点击可切换
          // hideOnClick :true, // 点击swiper-slide显隐
        },
        // 设置前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        // 设置自动轮播
        autoplay: {
          delay: 1000, // 2秒切换一次
          disableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay。默认为true：停止。
        },
        loop: true, //无缝轮播
        grabCursor : true, // 覆盖Swiper 时指针会变成手掌形状，拖动时指针会变成抓手形状
      },
    };
  },
  methods: {
    // 鼠标覆盖停止自动切换,鼠标离开开始自动切换
    handleAuto(status){
      //如果你初始化时没有定义Swiper实例，后面也可以通过Swiper的HTML元素来获取该实例
      let mysSwiper = document.querySelector('.my_swiper').swiper;
      status?(mysSwiper.autoplay.stop()):(mysSwiper.autoplay.start());
    },
    // 鼠标点击页面
    handleSwiper(event){
      let dataset = event.target.dataset;
      console.log(dataset);
      console.log(dataset.path,dataset.yaya); // 自定义，可获取相应的值
      // 跳转
      // window.location.href = "https://www.baidu.com"
    }
    
  },
};
</script>

<style scoped>
.my_swiper{
    /* width: 100%; */
    width: 750px;
    height: 500px;
}
.my_swiper>.swiper-slide {
  height: 100%;
}
.my_swiper img{
  display: block;
  /* width: 100%; */
  height: inherit;
}
/* 设置小圆点样式 */
.my_swiper /deep/ .swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    color:#000;
    opacity: 1;
    background: rgba(0,0,0,0.2);
}
/* 设置小圆点激活样式 */
.my_swiper /deep/ .swiper-pagination-bullet-active {
    color:#fff;
    background: #151391;
}
</style>

效果图：