swiper-next
Version:
Vue3 的 Swiper 组件
2 lines • 2.45 kB
CSS
.swiper-next{display:block;height:150px}.swiper-next[hidden]{display:none}.swiper-next__wrapper{height:100%;overflow:hidden;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);width:100%}.swiper-next__slides{bottom:0;left:0;position:absolute;right:0;top:0}.swiper-next__slide-frame{height:100%;left:0;position:absolute;top:0;width:100%;will-change:transform}.swiper-next__dots{font-size:0;position:absolute}.swiper-next__dots-horizontal{bottom:10px;left:50%;text-align:center;-webkit-transform:translate(-50%);transform:translate(-50%);white-space:nowrap}.swiper-next__dots-horizontal .swiper-next__dot{margin-right:8px}.swiper-next__dots-horizontal .swiper-next__dot:last-child{margin-right:0}.swiper-next__dots-vertical{right:10px;text-align:right;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.swiper-next__dots-vertical .swiper-next__dot{display:block;margin-bottom:9px}.swiper-next__dots-vertical .swiper-next__dot:last-child{margin-bottom:0}.swiper-next__dot{background:rgba(0,0,0,.3);border-radius:50%;cursor:pointer;display:inline-block;height:8px;transition-property:background-color;transition-timing-function:ease;width:8px}.swiper-next__dot-active{background-color:#000}.swiper-next__navigation{align-items:center;border-radius:50%;cursor:pointer;display:flex;height:26px;margin-top:-13px;opacity:1;position:absolute;top:50%;transition:all .2s;width:26px}.swiper-next__navigation-disabled{cursor:not-allowed;opacity:.35}.swiper-next__navigation-hide{cursor:auto;opacity:0;pointer-events:none}.swiper-next__navigation-prev{left:10px}.swiper-next__navigation-prev svg{left:10px;margin-left:-1px}.swiper-next__navigation-prev.swiper-next__navigation-vertical{left:50%;margin-left:-13px;top:18px}.swiper-next__navigation-prev.swiper-next__navigation-vertical svg{margin-left:auto;margin-top:-2px;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.swiper-next__navigation-next{right:10px}.swiper-next__navigation-next svg{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.swiper-next__navigation-next.swiper-next__navigation-vertical{bottom:5px;left:50%;margin-left:-13px;top:auto}.swiper-next__navigation-next.swiper-next__navigation-vertical svg{margin-top:2px;-webkit-transform:rotate(270deg);transform:rotate(270deg)}
.swiper-next-item{cursor:grab;display:block;height:100%;overflow:hidden;position:absolute;width:100%;will-change:transform}.swiper-next-item[hidden]{display:none}