uniapp轮播图

<template>
    <view>
        <page-head title="swiper,可滑动视图"></page-head>
        <view class="uni-margin-wrap">
            <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
                <swiper-item>
                    <image class="swiper-item" src="../../static/image/uniui-logo.png" mode="aspectFill" />
                </swiper-item>
                <swiper-item>
                    <image class="swiper-item" src="../../static/image/uniui-logo.png" mode="aspectFill" />
                </swiper-item>
                <swiper-item>
                    <image class="swiper-item" src="../../static/image/uniui-logo.png" mode="aspectFill" />
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                indicatorDots: true,
                autoplay: true,
                interval: 2000,
                duration: 500
            }
        },
        methods: {
            changeIndicatorDots(e) {
                this.indicatorDots = !this.indicatorDots
            },
            changeAutoplay(e) {
                this.autoplay = !this.autoplay
            },
            intervalChange(e) {
                this.interval = e.detail.value
            },
            durationChange(e) {
                this.duration = e.detail.value
            }
        }
    }
</script>

<style>
    .uni-margin-wrap {
        width: 100%;
    }

    .swiper {
        height: 300rpx;
    }

    .swiper-item {
        width: 100%;
        height: 300rpx;
    }

    .swiper-list {
        margin-top: 40rpx;
        margin-bottom: 0;
    }

    .uni-common-mt {
        margin-top: 60rpx;
        position: relative;
    }

    .info {
        position: absolute;
        right: 20rpx;
    }

    .uni-padding-wrap {
        width: 550rpx;
        padding: 0 100rpx;
    }
</style>
文章目录结构如下：

HBuilderProjects/
  └── uniapp/
        └── static/
             └── image/
                   └── uniui-logo.png
        └── pages/
             └── component/
                   └── component.vue
实际效果：