swiper使用教程

swiper使用教程

<template>
  <div class="hello">

   <h1>hello</h1>

    <div>

      <!--<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">-->
      <swiper :options="swiperOption" ref="mySwiper">
        <!-- slides -->
        <!--<swiper-slide>I'm Slide 1</swiper-slide>-->
        <swiper-slide>
          <img src="./../assets/1.jpg" alt="">
        </swiper-slide>
        <swiper-slide>
          <img src="./../assets/2.jpg" alt="">
        </swiper-slide>
        <swiper-slide>
          <img src="./../assets/3.jpg" alt="">
        </swiper-slide>

        <!-- Optional controls -->
        <div class="pagination"  slot="pagination"></div>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
        <!--<div class="swiper-scrollbar"   slot="scrollbar"></div>-->
      </swiper>

    </div>


  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      swiperOption: {
        autoplay : 5000,
        pagination : '.pagination',
        paginationClickable :true
      }
    }
  }
}
</script>


</style>