<template>
	<view class="rotation">
		<swiper :indicator-dots="true" :autoplay="true" :interval="4000" :duration="1000">
			<swiper-item>
				<view class="swiper-item">
					<image src="../../static/show1.jpg" mode=""></image>
				</view>
			</swiper-item>
			
			<swiper-item>
				<view class="swiper-item">
					<image src="../../static/show2.jpg" mode=""></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="../../static/show3.jpg" mode=""></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="../../static/show4.jpg" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name:"rotation",
		data() {
			return {
				swiperImgArr:["../../static/show1.jpg","../../static/show2.jpg","../../static/show3.jpg","../../static/show4.jpg"]
			};
		}
	}
</script>

<style lang="scss">
	.rotation{
		width: 93%;
		// padding: 28.3rpx;
		border: 1.88rpx solid black;
		border-radius: 18.86rpx;
		margin: auto;
		background-color: $uni-bg-color-box;
		swiper{
			margin: 10px 20px;
			height: 283.01rpx;
			swiper-item{
				text-align: center;
				swiper-item image{
					width: 100%;
				}
			}
		}
	}
</style>
