vue-amazing-ui/lib/carousel/Carousel.css

An Amazing Vue3 UI Components Library, Using TypeScript.

.carousel-wrap[data-v-560cab42]{display:inline-block;width:var(--carousel-width);height:var(--carousel-height);margin:0 auto;position:relative;overflow:hidden}.carousel-wrap .carousel-flex-wrap[data-v-560cab42]{display:flex;width:100%;height:100%}.carousel-wrap .carousel-flex-wrap .image-wrap[data-v-560cab42]{flex-shrink:0;display:inline-block;cursor:pointer}.carousel-wrap .carousel-flex-wrap .image-wrap .image-link[data-v-560cab42]{display:block;height:100%;cursor:default}.carousel-wrap .carousel-flex-wrap .image-wrap .image-link .image-item[data-v-560cab42]{width:100%;height:100%;border-radius:var(--border-radius);display:inline-block;vertical-align:bottom}.carousel-wrap .carousel-flex-wrap .image-wrap .link-cursor[data-v-560cab42]{cursor:pointer}.carousel-wrap:hover .arrow-left[data-v-560cab42],.carousel-wrap:hover .arrow-right[data-v-560cab42]{opacity:.7;pointer-events:auto}.carousel-wrap .arrow-left[data-v-560cab42]{position:absolute;left:6px;top:50%;transform:translateY(-50%);color:var(--carousel-arrow-color);fill:currentColor;cursor:pointer;opacity:0;pointer-events:none;outline:none;transition:opacity .3s}.carousel-wrap .arrow-left[data-v-560cab42]:hover{opacity:1}.carousel-wrap .arrow-right[data-v-560cab42]{position:absolute;right:6px;top:50%;transform:translateY(-50%);color:var(--carousel-arrow-color);fill:currentColor;cursor:pointer;opacity:0;pointer-events:none;outline:none;transition:opacity .3s}.carousel-wrap .arrow-right[data-v-560cab42]:hover{opacity:1}.carousel-wrap .carousel-switch[data-v-560cab42]{display:flex;justify-content:center;gap:8px;position:absolute;z-index:9;bottom:12px;left:50%;transform:translate(-50%);height:auto}.carousel-wrap .carousel-switch .dot-item[data-v-560cab42]{width:var(--carousel-dot-size);height:var(--carousel-dot-size);border-radius:var(--carousel-dot-size);background-color:var(--carousel-dot-color);cursor:pointer;outline:none;transition:all .3s cubic-bezier(.4,0,.2,1)}.carousel-wrap .switch-top[data-v-560cab42]{top:12px;bottom:auto}.carousel-wrap .switch-left[data-v-560cab42]{inset:50% auto auto 12px;transform:translateY(-50%);flex-direction:column}.carousel-wrap .switch-right[data-v-560cab42]{inset:50% 12px auto auto;transform:translateY(-50%);flex-direction:column}.carousel-vertical .carousel-flex-wrap[data-v-560cab42]{flex-direction:column}.carousel-vertical .arrow-left[data-v-560cab42]{top:6px;left:50%;transform:translate(-50%) rotate(90deg)}.carousel-vertical .arrow-right[data-v-560cab42]{top:auto;bottom:6px;left:50%;transform:translate(-50%) rotate(90deg)}.carousel-fade .image-wrap[data-v-560cab42]{position:absolute;opacity:0;pointer-events:none;transition-property:opacity;transition-duration:var(--carousel-fade-duration);transition-timing-function:var(--carousel-fade-function)}.carousel-fade .image-fade-active[data-v-560cab42]{opacity:1;pointer-events:auto}