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

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

/* smart-carousel */
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: 0.55;
    cursor: default;
    pointer-events: none; }
  smart-carousel[swipe] {
    user-select: none; }
  smart-carousel .smart-carousel-item {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0;
    z-index: 0;
    box-sizing: border-box;
    pointer-events: none;
    user-select: none;
    background-position: center;
    background-repeat: no-repeat; }
    smart-carousel .smart-carousel-item .smart-carousel-item-container {
      pointer-events: none;
      user-select: text;
      position: relative;
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      padding-top: 50px;
      z-index: 1;
      box-sizing: border-box;
      background-position: center;
      background-size: cover; }
    smart-carousel .smart-carousel-item .smart-carousel-item-label,
    smart-carousel .smart-carousel-item .smart-carousel-item-content {
      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: 0px;
      top: 0px;
      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: 0px;
    width: 30px;
    height: 100%;
    cursor: pointer;
    opacity: 0.6;
    display: block; }
    smart-carousel .smart-arrow:after {
      font-size: 20px;
      position: absolute;
      left: 0px;
      top: 0px;
      pointer-events: none;
      user-select: none; }
    smart-carousel .smart-arrow:focus, smart-carousel .smart-arrow:hover {
      opacity: 0.8; }
    smart-carousel .smart-arrow:active {
      opacity: 1; }
    smart-carousel .smart-arrow > .smart-button {
      border-width: 0px; }
      smart-carousel .smart-arrow > .smart-button:active {
        background-color: transparent; }
    smart-carousel .smart-arrow[disabled] {
      opacity: 0.4;
      pointer-events: none; }
    smart-carousel .smart-arrow.smart-arrow-left {
      left: 0px; }
    smart-carousel .smart-arrow.smart-arrow-right {
      right: 0px; }
  smart-carousel[hide-arrows] .smart-arrow {
    display: none; }
  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: white;
      margin: 2px;
      cursor: pointer;
      box-sizing: content-box;
      opacity: 0.5; }
      smart-carousel .smart-indicators-container .smart-indicator.smart-active {
        opacity: 0.9;
        border-width: 3px; }
      smart-carousel .smart-indicators-container .smart-indicator:hover {
        opacity: 0.7; }
  smart-carousel[hide-indicators] .smart-indicators-container {
    display: none; }
  smart-carousel:not([animation='none']) {
    /* displayMode:"default" animations */
    /* fade */
    /* slide right to left */
    /* slide left to right */
    /* slide bottom to top */
    /* slide top to bottom */ }
    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: white solid 20px;
    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: 0ms; }
    smart-carousel[display-mode="3d"] .smart-carousel-item[position="-3"] {
      transform: perspective(800px) translateX(calc(-50% - 340px)) translateY(-50%) scale(0.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(0.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(0.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(0.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(0.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(0.4);
      opacity: .1;
      z-index: 1; }
  smart-carousel[display-mode="3d"]:not([animation='none']) .smart-carousel-item {
    transition-duration: 700ms; }
  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(0.4); }
  smart-carousel[display-mode="3d"].vertical .smart-carousel-item[position="-2"] {
    transform: perspective(800px) translateX(-50%) translateY(calc(-50% - 180px)) scale(0.5); }
  smart-carousel[display-mode="3d"].vertical .smart-carousel-item[position="-1"] {
    transform: perspective(800px) translateX(-50%) translateY(calc(-50% - 150px)) scale(0.6); }
  smart-carousel[display-mode="3d"].vertical .smart-carousel-item[position="1"] {
    transform: perspective(800px) translateX(-50%) translateY(calc(-50% + 150px)) scale(0.6); }
  smart-carousel[display-mode="3d"].vertical .smart-carousel-item[position="2"] {
    transform: perspective(800px) translateX(-50%) translateY(calc(-50% + 180px)) scale(0.5); }
  smart-carousel[display-mode="3d"].vertical .smart-carousel-item[position="3"] {
    transform: perspective(800px) translateX(-50%) translateY(calc(-50% + 210px)) scale(0.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(0.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(0.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(0.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(0.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(0.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(0.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(0.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(0.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(0.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(0.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(0.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(0.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(0.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(0.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(0.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(0.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(0.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(0.2); }
  smart-carousel[display-mode="multiple"]:not([animation='none']).smart-carousel-item.smart-out, 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-out, smart-carousel[display-mode="multiple"]:not([animation='none']).smart-carousel-item.smart-animate-trigger.smart-active {
    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: lightgray;
      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-height], smart-carousel[adaptive-auto-height] {
    height: 100%;
    overflow: visible;
    transition: height 0.6s ease-out;
    margin: 0 auto 70px auto; }
    smart-carousel[adaptive-height] > .smart-container, smart-carousel[adaptive-height].smart-container, smart-carousel[adaptive-auto-height] > .smart-container, smart-carousel[adaptive-auto-height].smart-container {
      position: relative; }
    smart-carousel[adaptive-height] .smart-container, smart-carousel[adaptive-auto-height] .smart-container {
      overflow: visible; }
    smart-carousel[adaptive-height] .smart-carousel-item, smart-carousel[adaptive-auto-height] .smart-carousel-item {
      height: auto; }
    smart-carousel[adaptive-height] .smart-slide-wrapper, smart-carousel[adaptive-auto-height] .smart-slide-wrapper {
      height: 100%;
      position: relative;
      display: flex;
      align-items: center;
      padding: 0 65px; }
    smart-carousel[adaptive-height] .smart-indicators-container, smart-carousel[adaptive-auto-height] .smart-indicators-container {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      bottom: 0;
      margin-top: 20px; }
    smart-carousel[adaptive-height] .smart-arrow, smart-carousel[adaptive-auto-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-height].smart-calculated-height .smart-carousel-item, smart-carousel[adaptive-auto-height].smart-calculated-height .smart-carousel-item {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center; }
    smart-carousel[adaptive-height].smart-calculated-height .smart-slide-wrapper, smart-carousel[adaptive-auto-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: 0px; } }
@keyframes carousel-out-slide-bottom {
  from {
    opacity: 1;
    top: 0px; }
  to {
    opacity: 1;
    top: 100%; } }
/* smart-carousel */
smart-carousel[right-to-left] .smart-carousel-item,
smart-carousel[right-to-left] .smart-indicators-container {
  direction: rtl; }

/*# sourceMappingURL=smart.carousel.css.map */