@insaic/neon
Version:
A Mobile UI Components built on Vue
45 lines (43 loc) • 970 B
CSS
.sq-swiper {
display: inline-block;
overflow: hidden;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 100%;
height: 250px;
}
.sq-swiper-wrap {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.sq-swiper-point-wrap {
position: absolute;
left: 50%;
bottom: 10px;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.sq-swiper-point-item {
width: 6px;
height: 6px;
border-radius: 50%;
border: 1px solid #fff;
background-color: transparent;
}
.sq-swiper-point-item.sq-swiper-point-active {
background-color: #fff;
}
.sq-swiper-point-item ~ .sq-swiper-point-item {
margin-left: 6px;
}