template view class=carousel swiper circular=true autoplay interval=3000 change=swiperChange swiper-item v-for=list in swiperList key=listid navigator url=pagesindexindex hover-class=n

<template>
  <view class="carousel skeleton-carousel">
    <swiper class="skeleton-swiper">
      <swiper-item v-for="index in 3" :key="index">
        <view class="skeleton-image"></view>
      </swiper-item>
    </swiper>
    <!-- 指示点 -->
    <view class="indicator">
      <text v-for="index in 3" :key="index" class="dot"></text>
    </view>
  </view>
</template>
<style lang="scss">
:host {
  display: block;
  height: 280rpx;
}

/* 轮播图 */
.carousel {
  height: 100%;
  position: relative;
  overflow: hidden;
  transform: translateY(0);
  background-color: #efefef;

  .indicator {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16rpx;
    display: flex;
    justify-content: center;

    .dot {
      width: 30rpx;
      height: 6rpx;
      margin: 0 8rpx;
      border-radius: 6rpx;
      background-color: rgba(255, 255, 255, 0.4);
    }
  }
}

/* 骨架屏 */
.skeleton-carousel {
  background-color: #f5f5f5;

  .skeleton-swiper {
    height: 100%;

    .skeleton-image {
      width: 100%;
      height: 100%;
      background-color: #ddd;
    }
  }
}
</style