轮播图，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.效果

轮播图，swiper使用

猜你喜欢