vue2+swiper5

 

 

<template>
  <swiper :options="swiperOption" @swiper="onSwiper" @slideChange="onSlideChange" class="swiper">
    <swiper-slide>
      <h1>全新视觉设计</h1>
      <p>全新构架、全新界面，带来前所未有的视觉体验</p>
      <div class="bts">
        <el-button type="danger">ios版</el-button>
        <el-button type="danger">安卓版</el-button>
      </div>
    </swiper-slide>
    <swiper-slide>456</swiper-slide>
    <swiper-slide>789</swiper-slide>
    <!-- 分页器 -->
    <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>
</template>

<script>
export default {
  data () {
    return {
      swiperOption: {
        slidesPerView: 1,
        // 设置分页器
        pagination: {
          el: '.swiper-pagination',
          // 设置点击可切换
          clickable: true
        },
        mousewheel: {
          eventsTarged: '.swiper',
        },
        // 设置前进后退按钮
        // navigation: {
        //   nextEl: '.swiper-button-next',
        //   prevEl: '.swiper-button-prev'
        // },
        // 设置自动轮播
        // autoplay: {
        //   delay: 5000 // 5秒切换一次
        // },
        // 设置轮播可循环
        // loop: true,
        // 设置纵向切换
        direction:"vertical"
      }
    }
  },
  methods: {
    onSwiper () {
      console.log(11);
    },
    onSlideChange () { //swiper-slide切换时触发
      console.log(22);
    }
  }
}
</script>