/* License: AGPL-3.0-or-later WITH Web-Template-Output-Additional-Permission-3.0-or-later */ @import 'mixins'; .carousel { position: relative; } .carousel-inner { position: relative; overflow: hidden; width: 100%; } .carousel-inner > .item { display: none; position: relative; -webkit-transition: 0.6s ease-in-out left; -o-transition: 0.6s ease-in-out left; transition: 0.6s ease-in-out left; } .carousel-inner img { width: 100%; max-height: 320px; } .carousel-inner > .item > img, .carousel-inner > .item > a > img { line-height: 1; } @media all and (transform-3d), (-webkit-transform-3d) { .carousel .item { left: 0 !important; -webkit-transition: opacity .4s; /*adjust timing here */ -moz-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; } .carousel-control { background-image: none !important; /* remove background gradients on controls */ } /* Fade controls with items */ .next.left, .prev.right { @include opacity(1); z-index: 1; } .active.left, .active.right { @include opacity(0); z-index: 2; } } .carousel-inner > .active, .carousel-inner > .next, .carousel-inner > .prev { display: block; } .carousel-inner > .active { left: 0; } .carousel-inner > .next, .carousel-inner > .prev { position: absolute; top: 0; width: 100%; } .carousel-inner > .next { left: 100%; } .carousel-inner > .prev { left: -100%; } .carousel-inner > .next.left, .carousel-inner > .prev.right { left: 0; } .carousel-inner > .active.left { left: -100%; } .carousel-inner > .active.right { left: 100%; }