Vue+Swipper插件实现轮播图

1.轮播图的实现

之前想自己实现轮播图的，发现没有必要再造一个轮子，就直接使用Swiper插件了。

1.1 轮播图插件的安装

安装前准备：

1. Node.js环境： (Node.js 中文网 (nodejs.cn))
2. Vue.js：(Vue.js (vuejs.org))
3. 安装Swiper，完成1、2步骤后，在终端输入 npm install swiper@5.2.0

1.2 轮播图的使用

1.2.1 轮播图插件的导入，在 scirpt 中加入下列代码

import Swiper from "swiper";

import 'swiper/css/swiper.min.css';

1.2.2 这里介绍一下基本的用法

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>

<script>
import Swiper from 'swiper';
import 'swiper/css/swiper.min.css'; 
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted(){
     new Swiper ('.swiper-container', {
    loop: true,
    // 分页器
    pagination: '.swiper-pagination',
    // 前进后退按钮
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    // 滚动条
    scrollbar: '.swiper-scrollbar',
  })        
  }
}
</script>

1.2.3 在Vue中将其封装方便调用

这里使用了 slot 插槽，方便之后的封装。

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
        <slot name="swipper-item"></slot>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>

import Swiper from "swiper"
import 'swiper/css/swiper.min.css';

export default {
    name:"swipper",
    mounted(){
        new Swiper ('.swiper-container', {
             pagination: {
              el: ".swiper-pagination",
              clickable: false //允许分页点击跳转
            },
            loop: true,
            autoplay: {
              delay: 1500,
              disableOnInteraction: false
            }
        })
    }
}
</script>

<style scoped>
  /* 修改pagination的颜色 */
  .swiper-container >>>.swiper-pagination-bullet-active{
    opacity: 1;
    background: red;
  }

</style>

<template>
    <swipper v-if="banners.length>1">
      <div v-for="item in banners" class="swiper-slide" slot="swipper-item">
        <a :href="item.link">
          <img :src="item.image"></img>
        </a>
      </div>
    </swipper>
</template>

<script>
import Swipper from 'components/common/swipper/swipper.vue'
export default {
    name: "HomeSwiper",
    props: {
        banners: {
            type: Array,
            default(){
                return []
            }
        }
    },
    components: {
        Swipper
    }
}
</script>

<style scoped>

</style>

2.总结

有手写过轮播图的小伙伴之后可以使用该插件进行快速的开发～