// Slendr - Basic styles .slendr { position: absolute; top: 0; left: 0; overflow: hidden; z-index: 5; width: 100%; height: 100%; background-color: #777; // Hide control and direction navs if slides length < 2 &[data-slendr-length="0"] .slendr-direction, &[data-slendr-length="1"] .slendr-direction, &[data-slendr-length="0"] .slendr-control, &[data-slendr-length="1"] .slendr-control { display: none; } .slendr-slides { position: absolute; left: 0; right: 0; top: 0; bottom: 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000; -webkit-transform: translateX(0); transform: translateX(0); will-change: transform; contain: style; } // Customize here the transition .slendr-animate { -webkit-transition: -webkit-transform .9s cubic-bezier(.4, 0, .2, 1); -moz-transition: transform .9s cubic-bezier(.4, 0, .2, 1); -ms-transition: transform .9s cubic-bezier(.4, 0, .2, 1); transition: transform .9s cubic-bezier(.4, 0, .2, 1); } .slendr-slide { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; background-repeat: no-repeat; background-position: center; background-size: cover; display: none; -webkit-transform: translateX(0); transform: translateX(0); will-change: transform; } .slendr-visible { display: block; } .slendr-direction { position: absolute; top: 50%; left: 0; z-index: 3; width: 100%; a { position: absolute; transition: opacity .3s ease-out; opacity: .7; color: #fff; font-size: 4em; &.active, &:hover { opacity: 1; } } .slendr-prev { left: 5%; } .slendr-next { right: 5%; } } .slendr-control { position: absolute; bottom: 6%; left: 0; z-index: 3; width: 100%; ul { margin-top: 0; padding: 0; height: 20px; text-align: center; font-size: 0; } a { display: inline-block; border-radius: 20px; -webkit-border-radius: 20px; background-color: rgba(255, 255, 255, .8); cursor: pointer; padding: 5px; width: 2px; height: 2px; margin-left: 5px; margin-right: 5px; transition: background-color .3s ease-out, box-shadow .3s ease-out; -webkit-transition: background-color .3s ease-out, box-shadow .3s ease-out; } .slendr-control-active { box-shadow: 0 0 0 2px rgba(255, 255, 255, 1) inset; -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 1) inset; background-color: rgba(255, 255, 255, .2); width: 3px; height: 3px; } } }