vue轮播图

<template>

  <swiper ref="mySwiper" :options="swiperOptions">

    <swiper-slide>

        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F2105211120031355-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642643900&t=ff92a105597c0a94ec8ba614e2ccd610" alt="">

    </swiper-slide>

    <swiper-slide>

        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642643900&t=a6d8733d838aca8895d0328c93d7fd3e" alt="">

    </swiper-slide>

    <swiper-slide>

        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F19100122420C335-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642643900&t=06e6051253cb31ae9ceb0ff494e38dec" alt="">

    </swiper-slide>

    <swiper-slide>

        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F052420110515%2F200524110515-11-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642643900&t=800e021d6fa0aba4612b653841156c11" alt="">

    </swiper-slide>

    <swiper-slide>

        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1ZZQ20QJS6-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642643900&t=bdc01922cdac68c42d6f2a9492438333" alt="">

    </swiper-slide>

    <div class="swiper-pagination" slot="pagination"></div>

  </swiper>

</template>

<script>

  export default {

    name: 'MySwiper',

    data() {

      return {

        /* swiper的配置项 */

        swiperOptions: {

         /*  到最后一页再滑动会回到第一页*/

          loop : true,

          /* 自动播放功能 */

          /* autoplay:true, */

          autoplay: {

            delay: 900, /* 过500毫秒播放一次 */

            stopOnLastSlide: false,

            /* 指示器被点击之后，图片还可以正常自动轮播 */

            disableOnInteraction: false,

          },

          pagination: {

            el: '.swiper-pagination',

            /* 指示器可以被点击 */

            clickable:true

          },

          // Some Swiper option/callback...

        }

      }

    },

    computed: {

      swiper() {

        return this.$refs.mySwiper.$swiper

      }

    },

    mounted() {

      console.log('Current Swiper instance object', this.swiper)

      /* 3的意思表示页面一打开默认显示第三页 */

      /* 1代表第一页的意思 */

      /* 1000毫秒 滑动的动画在1000毫秒左右展示完成 */

      /* this.swiper.slideTo(1, 1000, false) */

    }

    /* 设置成自动播放，滑动到最后一页的时候 再滑动可以到第一页 */

  }

</script>

<style scoped>

.swiper-container{

    width:600px;

    height: 400px;

    border:1px solid #ccc;

}

.swiper-slide img{

    width: 100%;

    height: 100%;

    display: block;

}

</style>