轮播图，swiper使用

背景：

　　最近接到一个需求，重写dashboard页面，需要用到轮播图。

　　但是轮播图只用两张图，此为前提。

　　本想直接用ElementUI的走马灯，但是只用两张图的情况下，走马灯不能循环播放，只能来回播放，公司的UI小姐姐说这样不专业，所以用了swiper。

正文：

　　一年前用过swiper，但早忘了。我说一下这次使用的过程。

　　1.装包

　　　　npm install vue-awesome-swiper --save

　　2.引入

　　// require styles
　　import 'swiper/dist/css/swiper.css'
　　import { swiper, swiperSlide } from 'vue-awesome-swiper'

　　3.使用

　　　　<swiper :options="swiperOption">
        <!-- slides -->
        <swiper-slide>
          <img src="./1.png" alt="1" />
        </swiper-slide>
        <swiper-slide>
          <img src="./2.png" alt="2" />
        </swiper-slide>
        <!-- Optional controls -->
        <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>

data() {
    return {
      // 轮播图参数
      swiperOption: {
        //滑动速度
        speed: 800,
        // // 指针形状
        // grabCursor : true,
        //循环
        loop: true,
        //自动播放
        autoplay: {
          // 自动切换的时间间隔，单位ms
          delay: 1500,
          // 用户操作swiper之后，是否禁止autoplay
          disableOnInteraction: false,
        },
        // 分页器
        pagination: {
          el: '.swiper-pagination',
          // 点击控制Swiper切换
          clickable :true,
        }
      }
    }
  },
  components: {
    swiper,
    swiperSlide
  }

 .container {
    width: 100%;
    overflow: hidden;
    height: 500px;
    // 轮播图样式
    .swiper-container {
      height: 100%;
      .swiper-slide {
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

4.效果

来源：https://www.cnblogs.com/mjwblog/p/11725562.html

标签

轮播

swiper