小程序层叠卡片滑动效果,供大家参考,具体内容如下
效果图
wxml
bindtap="choose" data-id="{ {item.id}}">
wxss
/*轮播图片*/
.lunbo_center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 50rpx 0;
box-sizing: border-box;
}
.teachers_b {
position: relative;
}
#slide {
margin: 0 auto;
width: 100%;
height: 160px;
position: relative;
}
#slide li {
position: absolute;
width: 600rpx;
height: 300rpx;
display: -webkit-box;
display: -webkit-flex;
display: flex;
align-items: flex-start;
-webkit-box-align: flex-start;
-webkit-align-items: flex-start;
background: #fff;
overflow: hidden;
box-shadow: 0 0 20px #1d374d;
}
#slide li image {
width: 100%;
height: 100%;
}
.slide_left {
width: 240px;
}
.slide_right {
padding: 40px;
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
min-width: 0;
}
.slide_right h3