vue中使用Swiper

本文首发于公众号【雪天前端】，欢迎关注！

第一步：安装

cnpm install swiper@3 vue-awesome-swiper@3 --save-dev

第二步：在main.js中引入

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
// 全局挂载
Vue.use(VueAwesomeSwiper)

第三步：页面中使用

组件结构代码：

<swiper :options="swiperOption" ref="mySwiper">
    <swiper-slide v-for="(item,index) in 12" :key="index">
       <div class="sli-box">11</div>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
    <div class="swiper-button-next" slot="pagination"></div>
    <div class="swiper-button-prev" slot="pagination"></div>
</swiper>

JS代码：

<script>
  export default {
    data() {
      return {
        swiperOption: {
          slidesPerView: 5,
          spaceBetween: 30,
          loop: true,
          autoplay: {
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: false
          },
          pagination: {
            el: '.swiper-pagination',
            type: 'fraction',
            clickable: true
          },
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
        }
      };
    },
    methods: {
      
    }
  }
</script>

css代码：

.swiper {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sli-box {
    width: 100%;
    height: 300px;
    background-color: #fff;
    border: 1px solid #333;
    padding: 10px;
  }

这是一个多图滚动的案例，如需要其他的轮播效果，在swiper官网拷贝相关js代码替换即可。效果如下：