原生js实现Swiper功能

原生js实现Swiper功能

主要使用html,css,js来完成

首要的HTML部分：
1、.slide滑槽，里面存放所有图片；
2、.prev是向左的箭头，.next是向右的箭头；
3、pointer是指示器，用于放的五个切换按钮，每个切换按钮用span来表示；
其次呢，css部分
1、.slide、.prev、.next、pointer全都用绝对定位放到合适位置；
2、.slide的所有图片水平排列
js部分
1、切换功能：
设置 nextEl: ‘.swiper-button-next’,
prevEl: ‘.swiper-button-prev’,
2、切换功能的淡入动画效果
effect: ‘fade’,
3、跳转功能
clickable: true,
4、自动播放
autoPlay:true

代码：

<template>
  <div v-swiper:mySwiper="swiperOption">
    <div class="swiper-wrapper">
      <div class="swiper-slide" :key="banner" v-for="banner in banners">