Taro/微信小程序swiper设置图片圆角,修改点的位置

2020-10-29  本文已影响0人  逸笛
图片.png
      <View className="banner">
          <Swiper
            className="bannerSwiper"
            indicator-dots
            circular
            autoplay
            easing-function="easeInOutCubic"
            indicator-active-color="#FFFFFF"
          >
            {(bannerImg || []).map((item, index) => {
              return (
                <View key={item.id}>
                  <SwiperItem className="bannerItem">
                    <Image className="bannerImg" src={item.img}></Image>
                  </SwiperItem>
                </View>
              );
            })}
          </Swiper>
        </View>
.bannerView {
  margin: 22px auto 29px auto;
  width: 100%;
  box-sizing: border-box;

  .bannerSwiper {
    width: 690px;
    height: 356px;
    text-align: center;
    border-radius: 16px !important;
    overflow: hidden;
  }

  .bannerItem {
    position: relative;
    left: 0;
    top: 0;
    .bannerImg {
      width: 690px;
      height: 356px;
    }
    .bannerName {
      position: absolute;
      bottom: 25px;
      left: 25px;
      color: #ffffff;
    }
  }
//改变点的位置
  .wx-swiper-dot {
    position: absolute;
    left: unset !important;
    right: 28px;
    bottom: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }

  .wx-swiper-dots.wx-swiper-dots-horizontal {
    margin-left: 328px;
  }

上一篇下一篇

猜你喜欢

热点阅读