various-ui/styles/carousel.css

This is a test version of the Vue 3 component library

.ui-carousel{--uioption-carousel-indicator-color:var(--uicolor-font-2);--uioption-carousel-control-icon-color:var(--uicolor-font-6);--uioption-carousel-control-border-color:var(--uicolor-font-6);--uioption-carousel-control-background-color:var(--uicolor-font-6-03);--uioption-carousel-indicator-active-color:var(--uicolor-main-color);--uioption-carousel-control-active-icon-color:var(--uicolor-main-color);--uioption-carousel-control-active-border-color:var(--uicolor-font-6);--uioption-carousel-control-active-background-color:var(--uicolor-font-6)}.ui-carousel{position:relative}.ui-carousel>.ui-carousel-control{justify-content:center;border-radius:50%;align-items:center;background:var(--uioption-carousel-control-background-color);transition:all .3s ease-in-out;transform:translate(0,-50%);font-size:20px;position:absolute;display:flex;opacity:0;border:1px solid var(--uioption-carousel-control-border-color);cursor:pointer;height:48px;color:var(--uioption-carousel-control-icon-color);width:48px}.ui-carousel>.ui-carousel-control.ui-carousel-left-control{top:50%;left:0}.ui-carousel>.ui-carousel-control.ui-carousel-left-control .ui-icon{transform:rotate(90deg)}.ui-carousel>.ui-carousel-control.ui-carousel-right-control{top:50%;right:0}.ui-carousel>.ui-carousel-control.ui-carousel-right-control .ui-icon{transform:rotate(-90deg)}.ui-carousel>.ui-carousel-schedules{align-items:center;transform:translateX(-50%);position:absolute;display:flex;bottom:20px;left:50%}.ui-carousel>.ui-carousel-schedules .ui-carousel-schedule{width:4px;height:5px;margin:0 16px;cursor:pointer;transition:all .3s ease-in-out;border-radius:9999px;background-color:var(--uioption-carousel-indicator-color)}.ui-carousel>.ui-carousel-schedules .ui-carousel-schedule.active{width:72px;background-color:var(--uioption-carousel-indicator-active-color)}.ui-carousel>.ui-carousel-main{width:100%;height:100%;overflow:hidden}.ui-carousel>.ui-carousel-main>.ui-carousel-container{width:100%;height:100%;position:relative}.ui-carousel>.ui-carousel-main>.ui-carousel-container>*{top:0;left:100%;width:100%;height:100%;position:absolute;transition:none!important}.ui-carousel>.ui-carousel-main>.ui-carousel-container>:nth-child(1){position:relative;transform:translateX(-100%)}.ui-carousel.ui-carousel-always .ui-carousel-control,.ui-carousel.ui-carousel-hover:hover .ui-carousel-control{opacity:1}.ui-carousel.ui-carousel-always .ui-carousel-control.ui-carousel-left-control,.ui-carousel.ui-carousel-hover:hover .ui-carousel-control.ui-carousel-left-control{transform:translate(100%,-50%)}.ui-carousel.ui-carousel-always .ui-carousel-control.ui-carousel-right-control,.ui-carousel.ui-carousel-hover:hover .ui-carousel-control.ui-carousel-right-control{transform:translate(-100%,-50%)}.ui-carousel.ui-carousel-always .ui-carousel-control:hover,.ui-carousel.ui-carousel-hover:hover .ui-carousel-control:hover{color:var(--uioption-carousel-control-active-icon-color);border-color:var(--uioption-carousel-control-active-border-color);background-color:var(--uioption-carousel-control-active-background-color)}