这是微信小程序的一个轮播图你能帮我写一个好看的且酷炫的样式吗要求轮播图好看酷炫给出重写后的wxml文件和wxss文件view class=swiper-container swiper class=swiper swiper-itemimage src=http12143591198080mdyimga1pngimageswiper-item swiper-itemima

wxml文件：

wxss文件：

.swiper-container{ height: 500rpx; overflow: hidden; position: relative; }

.swiper{ width: 100%; height: 100%; }

.swiper-item{ position: relative; width: 100%; height: 100%; }

.swiper-item image{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }

.swiper-pagination-bullet{ width: 20rpx; height: 20rpx; border-radius: 50%; background-color: rgba(255, 255, 255, .5); margin: 0 10rpx; }

.swiper-pagination-bullet-active{ background-color: #ffffff; }

.swiper-pagination{ bottom: 30rpx; }

.swiper-pagination-bullet::after{ content: ''; display: block; width: 100%; height: 100%; border-radius: 50%; background-color: #ffffff; opacity: 0; transition: opacity .2s ease-in-out; }

.swiper-pagination-bullet-active::after{ opacity: 1; }

.swiper-item:nth-child(1) image{ animation: fade-in 1s ease-in-out; }

.swiper-item:nth-child(2) image{ animation: fade-in 1s ease-in-out .2s forwards; }

.swiper-item:nth-child(3) image{ animation: fade-in 1s ease-in-out .4s forwards; }

.swiper-item:nth-child(4) image{ animation: fade-in 1s ease-in-out .6s forwards; }

@keyframes fade-in{ from{ opacity: 0; transform: scale(1.2); } to{ opacity: 1; transform: scale(1); } }

说明：此样式实现了轮播图的自动播放、指示器、切换动画等功能，具有较好的交互体验。其中，指示器样式为白色圆点，当前页圆点为白色实心圆，图片切换时带有缩放渐显动画。