Taro中Swiper组件卡片3D化

[imondo]

DOM格式

        <View className="college-container">
          <Swiper
            className="swiper-block"
            circular
            autoplay
            current={this.state.current}
            previous-margin="32rpx"
            next-margin="32rpx"
            onChange={this.handleChange.bind(this)}
          >
            {list.slice(0, 1).map(item => {
              return (
                <SwiperItem className="swiper-item">
                  <FallbackImage src={item.content.posterPath} directory={false}/>
                </SwiperItem>
              );
            })}
          </Swiper>
        </View>

样式

.index-wrapper {
  .college-container {
    display: flex;
    flex-direction: column;
  }

  .swiper-block {
    height: 258px;
    width: 100%;
  }

  swiper-item {
    width: 620px !important;
    height: 258px !important;
  }

  .swiper-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    overflow: unset;
  }

  .swiper-image {
    height: 258px;
    width: 620px;
    border-radius: 9px;
    box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.10);
    margin: 0px 32px;
    z-index: 1;
    transform: scale(0.9);
  }

  .active {
    transform: scale(1);
    transition: all 0.2s ease-in 0s;
    z-index: 20;
  }
}