android层叠式卡片横向轮播,小程序实现层叠卡片滑动效果

小程序层叠卡片滑动效果，供大家参考，具体内容如下

效果图

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 {

font: 400 30px/18px "Microso