fine-true/lib/swiper/index.css

A small and beautiful Vue3 version of the UI Library

.fine-swiper{width:100%;height:100%;overflow:hidden;cursor:-webkit-grab;position:relative}.fine-swiper-horizontal .fine-swiper-slide-container{height:100%;width:100%;display:flex}.fine-swiper-horizontal .fine-swiper-slide-container>div{flex-shrink:0;height:100%;width:100%}.fine-swiper-horizontal .fine-swiper-next-btn,.fine-swiper-horizontal .fine-swiper-prev-btn{position:absolute;top:50%;border-radius:3px;width:42px;height:42px;transform:translateY(-50%) rotate(-45deg);display:flex;justify-content:center;align-items:center}.fine-swiper-horizontal .fine-swiper-prev-btn{background-color:rgba(255,255,255,.5);left:20px}.fine-swiper-horizontal .fine-swiper-next-btn:active,.fine-swiper-horizontal .fine-swiper-prev-btn:active,.fine-swiper-vertical .fine-swiper-next-btn:active,.fine-swiper-vertical .fine-swiper-prev-btn:active{background-color:rgba(255,255,255,.7)}.fine-swiper-horizontal .fine-swiper-next-btn>i,.fine-swiper-horizontal .fine-swiper-prev-btn>i{transform:rotate(45deg);display:inline-block;font-size:24px;color:#fff}.fine-swiper-horizontal .fine-swiper-next-btn{background:rgba(255,255,255,.5);right:20px}.fine-swiper-horizontal .fine-swiper-pagination{position:absolute;width:100%;height:32px;left:0;bottom:0;display:flex;justify-content:center;align-items:center}.fine-swiper-horizontal .fine-swiper-pagination span,.fine-swiper-vertical .fine-swiper-pagination span{display:inline-block;width:6px;height:6px;opacity:1;border-radius:10px;background:#fff;margin:0 3px;cursor:pointer;transition:width .3s ease-in-out}.fine-swiper-horizontal .fine-swiper-pagination span.fine-swiper-pagination-item-active{background:#fdd000;width:12px}.fine-swiper-vertical .fine-swiper-slide-container,.fine-swiper-vertical .fine-swiper-slide-container>div{height:100%;width:100%}.fine-swiper-vertical .fine-swiper-next-btn,.fine-swiper-vertical .fine-swiper-prev-btn{position:absolute;right:20px;border-radius:3px;width:42px;height:42px;transform:rotate(-45deg);display:flex;justify-content:center;align-items:center}.fine-swiper-vertical .fine-swiper-prev-btn{background-color:rgba(255,255,255,.5);top:20px}.fine-swiper-vertical .fine-swiper-next-btn>i,.fine-swiper-vertical .fine-swiper-prev-btn>i{transform:rotate(135deg);display:inline-block;font-size:24px;color:#fff}.fine-swiper-vertical .fine-swiper-next-btn{background:rgba(255,255,255,.5);bottom:20px}.fine-swiper-vertical .fine-swiper-pagination{position:absolute;width:32px;height:100%;right:0;top:0;display:flex;flex-direction:column;justify-content:center;align-items:center}.fine-swiper-vertical .fine-swiper-pagination span{margin:3px 0}.fine-swiper-vertical .fine-swiper-pagination span.fine-swiper-pagination-item-active{background:#fdd000;height:12px}