图片.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;
}
网友评论