smart-webcomponents-react/source/styles/components/smart.carousel.css

[](https://jqwidgets.com/license/)

smart-carousel .smart-carousel-item,smart-carousel .smart-carousel-item .smart-carousel-item-container{pointer-events:none;background-repeat:no-repeat;background-position:center;box-sizing:border-box;height:100%}smart-carousel{width:var(--smart-carousel-default-width);height:var(--smart-carousel-default-height)}smart-carousel.smart-container,smart-carousel>.smart-container{display:block;position:relative;width:100%;height:100%}smart-carousel .smart-items-container{position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden}smart-carousel[disabled]{opacity:.55;cursor:default;pointer-events:none}smart-carousel[swipe]{user-select:none}smart-carousel .smart-carousel-item{width:100%;position:absolute;left:0;top:0;opacity:0;z-index:0;user-select:none}smart-carousel .smart-carousel-item .smart-carousel-item-container{user-select:text;position:relative;width:100%;padding-top:50px;z-index:1;background-size:cover}smart-carousel .smart-carousel-item .smart-carousel-item-content,smart-carousel .smart-carousel-item .smart-carousel-item-label{text-align:center;box-sizing:border-box;position:absolute;top:30%;left:50%;transform:translate(-50%,-50%)}smart-carousel .smart-carousel-item .smart-carousel-item-content{top:40%;transform:translate(-50%,0)}smart-carousel .smart-carousel-item .smart-carousel-html-content{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;box-sizing:border-box}smart-carousel .smart-carousel-item.smart-active{opacity:1;pointer-events:all;user-select:text}smart-carousel .smart-arrow{position:absolute;top:0;width:30px;height:100%;cursor:pointer;opacity:.6;display:block}smart-carousel[hide-arrows] .smart-arrow,smart-carousel[hide-indicators] .smart-indicators-container{display:none}smart-carousel .smart-arrow:after{font-size:20px;position:absolute;left:0;top:0;pointer-events:none;user-select:none}smart-carousel .smart-arrow:focus,smart-carousel .smart-arrow:hover{opacity:.8}smart-carousel .smart-arrow:active{opacity:1}smart-carousel .smart-arrow>.smart-button{border-width:0}smart-carousel .smart-arrow>.smart-button:active{background-color:transparent}smart-carousel .smart-arrow[disabled]{opacity:.4;pointer-events:none}smart-carousel .smart-arrow.smart-arrow-left{left:0}smart-carousel .smart-arrow.smart-arrow-right{right:0}smart-carousel .smart-indicators-container{position:absolute;bottom:10px;left:50%;transform:translate(-50%);display:flex;flex-direction:row;align-items:center}smart-carousel .smart-indicators-container .smart-indicator{width:10px;height:10px;border:1px solid gray;background-color:#fff;margin:2px;cursor:pointer;box-sizing:content-box;opacity:.5}smart-carousel .smart-indicators-container .smart-indicator.smart-active{opacity:.9;border-width:3px}smart-carousel .smart-indicators-container .smart-indicator:hover{opacity:.7}smart-carousel:not([animation=none]) .smart-carousel-item{animation-duration:1s}smart-carousel:not([animation=none]) .smart-carousel-item.smart-active.smart-animate-trigger,smart-carousel:not([animation=none]).fade .smart-carousel-item.smart-active.smart-animate-trigger{animation-name:carousel-active-fade}smart-carousel:not([animation=none]) .smart-carousel-item.smart-out.smart-animate-trigger,smart-carousel:not([animation=none]).fade .smart-carousel-item.smart-out.smart-animate-trigger{animation-name:carousel-out-fade}smart-carousel:not([animation=none]).slide .smart-carousel-item.smart-active.smart-animate-trigger,smart-carousel:not([animation=none]).slide-left .smart-carousel-item.smart-active.smart-animate-trigger{animation-name:carousel-active-slide}smart-carousel:not([animation=none]).slide .smart-carousel-item.smart-out.smart-animate-trigger,smart-carousel:not([animation=none]).slide-left .smart-carousel-item.smart-out.smart-animate-trigger{animation-name:carousel-out-slide}smart-carousel:not([animation=none]).slide-right .smart-carousel-item.smart-active.smart-animate-trigger{animation-name:carousel-active-slide-right}smart-carousel:not([animation=none]).slide-right .smart-carousel-item.smart-out.smart-animate-trigger{animation-name:carousel-out-slide-right}smart-carousel:not([animation=none]).slide-top .smart-carousel-item.smart-active.smart-animate-trigger{animation-name:carousel-active-slide-top}smart-carousel:not([animation=none]).slide-top .smart-carousel-item.smart-out.smart-animate-trigger{animation-name:carousel-out-slide-top}smart-carousel:not([animation=none]).slide-bottom .smart-carousel-item.smart-active.smart-animate-trigger{animation-name:carousel-active-slide-bottom}smart-carousel:not([animation=none]).slide-bottom .smart-carousel-item.smart-out.smart-animate-trigger{animation-name:carousel-out-slide-bottom}smart-carousel[display-mode="3d"] .smart-carousel-html-content{padding-left:30px;padding-right:20px}smart-carousel[display-mode="3d"] .smart-carousel-item{width:var(--smart-carousel-3d-mode-slide-width);height:var(--smart-carousel-3d-mode-slide-height);border:20px solid #fff;position:absolute;box-sizing:border-box;overflow:hidden;top:50%;left:50%;z-index:10;transform:translateX(-50%) translateY(-50%) rotateX(1deg) scale(1);transition-duration:0s}smart-carousel[display-mode="3d"] .smart-carousel-item[position="-3"]{transform:perspective(800px) translateX(calc(-50% - 340px)) translateY(-50%) scale(.4);opacity:.1;z-index:1}smart-carousel[display-mode="3d"] .smart-carousel-item[position="-2"]{transform:perspective(800px) translateX(calc(-50% - 300px)) translateY(-50%) scale(.5);opacity:.2;z-index:8}smart-carousel[display-mode="3d"] .smart-carousel-item[position="-1"]{transform:perspective(800px) translateX(calc(-50% - 260px)) translateY(-50%) scale(.6);opacity:.3;z-index:9}smart-carousel[display-mode="3d"] .smart-carousel-item[position="1"]{transform:perspective(800px) translateX(calc(-50% + 260px)) translateY(-50%) scale(.6);opacity:.3;z-index:9}smart-carousel[display-mode="3d"] .smart-carousel-item[position="2"]{transform:perspective(800px) translateX(calc(-50% + 300px)) translateY(-50%) scale(.5);opacity:.2;z-index:8}smart-carousel[display-mode="3d"] .smart-carousel-item[position="3"]{transform:perspective(800px) translateX(calc(-50% + 340px)) translateY(-50%) scale(.4);opacity:.1;z-index:1}smart-carousel[display-mode="3d"]:not([animation=none]) .smart-carousel-item{transition-duration:.7s}smart-carousel[display-mode="3d"]:not([animation=none]) .smart-carousel-item,smart-carousel[display-mode="3d"]:not([animation=none]) .smart-carousel-item.smart-active,smart-carousel[display-mode="3d"]:not([animation=none]) .smart-carousel-item.smart-out{animation-name:unset}smart-carousel[display-mode="3d"].circle .smart-carousel-item{border-radius:50%}smart-carousel[display-mode="3d"].vertical .smart-carousel-item[position="-3"]{transform:perspective(800px) translateX(-50%) translateY(calc(-50% - 210px)) scale(.4)}smart-carousel[display-mode="3d"].vertical .smart-carousel-item[position="-2"]{transform:perspective(800px) translateX(-50%) translateY(calc(-50% - 180px)) scale(.5)}smart-carousel[display-mode="3d"].vertical .smart-carousel-item[position="-1"]{transform:perspective(800px) translateX(-50%) translateY(calc(-50% - 150px)) scale(.6)}smart-carousel[display-mode="3d"].vertical .smart-carousel-item[position="1"]{transform:perspective(800px) translateX(-50%) translateY(calc(-50% + 150px)) scale(.6)}smart-carousel[display-mode="3d"].vertical .smart-carousel-item[position="2"]{transform:perspective(800px) translateX(-50%) translateY(calc(-50% + 180px)) scale(.5)}smart-carousel[display-mode="3d"].vertical .smart-carousel-item[position="3"]{transform:perspective(800px) translateX(-50%) translateY(calc(-50% + 210px)) scale(.4)}smart-carousel[display-mode="3d"]:not([animation=none]).horizontal-stacked .smart-carousel-item[position="-3"]{transform:perspective(800px) translateX(calc(-50% - 395px)) translateY(-50%) scale(.4)}smart-carousel[display-mode="3d"]:not([animation=none]).horizontal-stacked .smart-carousel-item[position="-2"]{transform:perspective(800px) translateX(calc(-50% - 355px)) translateY(-50%) scale(.5)}smart-carousel[display-mode="3d"]:not([animation=none]).horizontal-stacked .smart-carousel-item[position="-1"]{transform:perspective(800px) translateX(calc(-50% - 280px)) translateY(-50%) scale(.6)}smart-carousel[display-mode="3d"]:not([animation=none]).horizontal-stacked .smart-carousel-item[position="1"]{transform:perspective(800px) translateX(calc(-50% + 280px)) translateY(-50%) scale(.6)}smart-carousel[display-mode="3d"]:not([animation=none]).horizontal-stacked .smart-carousel-item[position="2"]{transform:perspective(800px) translateX(calc(-50% + 355px)) translateY(-50%) scale(.5)}smart-carousel[display-mode="3d"]:not([animation=none]).horizontal-stacked .smart-carousel-item[position="3"]{transform:perspective(800px) translateX(calc(-50% + 395px)) translateY(-50%) scale(.4)}smart-carousel[display-mode="3d"]:not([animation=none]).bottom-top .smart-carousel-item[position="-3"]{transform:perspective(800px) translateX(calc(-50% - 450px)) translateY(calc(-50% + 150px)) scale(.2)}smart-carousel[display-mode="3d"]:not([animation=none]).bottom-top .smart-carousel-item[position="-2"]{transform:perspective(800px) translateX(calc(-50% - 380px)) translateY(calc(-50% + 100px)) scale(.4)}smart-carousel[display-mode="3d"]:not([animation=none]).bottom-top .smart-carousel-item[position="-1"]{transform:perspective(800px) translateX(calc(-50% - 280px)) translateY(calc(-50% + 30px)) scale(.6)}smart-carousel[display-mode="3d"]:not([animation=none]).bottom-top .smart-carousel-item[position="1"]{transform:perspective(800px) translateX(calc(-50% + 280px)) translateY(calc(-50% - 30px)) scale(.6)}smart-carousel[display-mode="3d"]:not([animation=none]).bottom-top .smart-carousel-item[position="2"]{transform:perspective(800px) translateX(calc(-50% + 380px)) translateY(calc(-50% - 100px)) scale(.4)}smart-carousel[display-mode="3d"]:not([animation=none]).bottom-top .smart-carousel-item[position="3"]{transform:perspective(800px) translateX(calc(-50% + 450px)) translateY(calc(-50% - 150px)) scale(.2)}smart-carousel[display-mode="3d"]:not([animation=none]).top-bottom .smart-carousel-item[position="-3"]{transform:perspective(800px) translateX(calc(-50% - 450px)) translateY(calc(-50% - 150px)) scale(.2)}smart-carousel[display-mode="3d"]:not([animation=none]).top-bottom .smart-carousel-item[position="-2"]{transform:perspective(800px) translateX(calc(-50% - 380px)) translateY(calc(-50% - 100px)) scale(.4)}smart-carousel[display-mode="3d"]:not([animation=none]).top-bottom .smart-carousel-item[position="-1"]{transform:perspective(800px) translateX(calc(-50% - 280px)) translateY(calc(-50% - 30px)) scale(.6)}smart-carousel[display-mode="3d"]:not([animation=none]).top-bottom .smart-carousel-item[position="1"]{transform:perspective(800px) translateX(calc(-50% + 280px)) translateY(calc(-50% + 30px)) scale(.6)}smart-carousel[display-mode="3d"]:not([animation=none]).top-bottom .smart-carousel-item[position="2"]{transform:perspective(800px) translateX(calc(-50% + 380px)) translateY(calc(-50% + 100px)) scale(.4)}smart-carousel[display-mode="3d"]:not([animation=none]).top-bottom .smart-carousel-item[position="3"]{transform:perspective(800px) translateX(calc(-50% + 450px)) translateY(calc(-50% + 150px)) scale(.2)}smart-carousel[display-mode=multiple]:not([animation=none]).smart-carousel-item.smart-active,smart-carousel[display-mode=multiple]:not([animation=none]).smart-carousel-item.smart-animate-trigger.smart-active,smart-carousel[display-mode=multiple]:not([animation=none]).smart-carousel-item.smart-animate-trigger.smart-out,smart-carousel[display-mode=multiple]:not([animation=none]).smart-carousel-item.smart-out{animation-name:none}smart-carousel[display-mode=multiple]:not([animation=none]) .smart-items-container{transition-duration:1s}smart-carousel[display-mode=multiple] .smart-items-container{overflow:hidden;width:max-content;transition:margin-left ease-in-out}smart-carousel[display-mode=multiple] .smart-carousel-item{opacity:1;float:left;display:inline-block;position:relative;width:var(--smart-carousel-multiple-mode-slide-width)}smart-carousel[display-mode=multiple] .smart-carousel-item.smart-active{background-color:#d3d3d3;transition:background-color 1s ease-in-out}smart-carousel[display-mode=multiple] .smart-carousel-item.smart-out{transition:background-color 1s ease-in-out}smart-carousel smart-repeat-button[hover] button{background-color:transparent}smart-carousel[adaptive-auto-height],smart-carousel[adaptive-height]{height:100%;overflow:visible;transition:height .6s ease-out;margin:0 auto 70px}smart-carousel[adaptive-auto-height].smart-container,smart-carousel[adaptive-auto-height]>.smart-container,smart-carousel[adaptive-height].smart-container,smart-carousel[adaptive-height]>.smart-container{position:relative}smart-carousel[adaptive-auto-height] .smart-container,smart-carousel[adaptive-height] .smart-container{overflow:visible}smart-carousel[adaptive-auto-height] .smart-carousel-item,smart-carousel[adaptive-height] .smart-carousel-item{height:auto}smart-carousel[adaptive-auto-height] .smart-slide-wrapper,smart-carousel[adaptive-height] .smart-slide-wrapper{height:100%;position:relative;display:flex;align-items:center;padding:0 65px}smart-carousel[adaptive-auto-height] .smart-indicators-container,smart-carousel[adaptive-height] .smart-indicators-container{display:flex;align-items:center;justify-content:center;position:relative;bottom:0;margin-top:20px}smart-carousel[adaptive-auto-height] .smart-arrow,smart-carousel[adaptive-height] .smart-arrow{width:50px;height:50px;background:var(--smart-surface);display:flex;align-items:center;justify-content:center;border-color:var(--smart-border);top:50%;transform:translateY(-50%)}smart-carousel[adaptive-auto-height].smart-calculated-height .smart-carousel-item,smart-carousel[adaptive-height].smart-calculated-height .smart-carousel-item{height:100%;display:flex;justify-content:center;align-items:center}smart-carousel[adaptive-auto-height].smart-calculated-height .smart-slide-wrapper,smart-carousel[adaptive-height].smart-calculated-height .smart-slide-wrapper{height:auto}[disabled] .smart-carousel-item.smart-active{pointer-events:none}@keyframes carousel-active-fade{from{opacity:0}to{opacity:1}}@keyframes carousel-out-fade{from{opacity:1}to{opacity:0}}@keyframes carousel-active-slide{from{left:100%;opacity:1}to{left:0;opacity:1}}@keyframes carousel-out-slide{from{left:0;opacity:1}to{left:-100%;opacity:1}}@keyframes carousel-active-slide-right{from{opacity:1;left:-100%}to{opacity:1;left:0}}@keyframes carousel-out-slide-right{from{left:0;opacity:1}to{left:100%;opacity:1}}@keyframes carousel-active-slide-top{from{top:100%;opacity:1}to{top:0;opacity:1}}@keyframes carousel-out-slide-top{from{top:0;opacity:1}to{top:-100%;opacity:1}}@keyframes carousel-active-slide-bottom{from{opacity:1;top:-100%}to{opacity:1;top:0}}@keyframes carousel-out-slide-bottom{from{opacity:1;top:0}to{opacity:1;top:100%}}smart-carousel[right-to-left] .smart-carousel-item,smart-carousel[right-to-left] .smart-indicators-container{direction:rtl}