.multi-item-carousel{ .carousel-inner{ > .item{ transition: 500ms ease-in-out left; } .active{ &.left{ left:-33%; } &.right{ left:33%; } } .next{ left: 33%; } .prev{ left: -33%; } @media all and (transform-3d), (-webkit-transform-3d) { > .item{ // use your favourite prefixer here transition: 500ms ease-in-out all; backface-visibility: visible; transform: none!important; } } } .carouse-control{ &.left, &.right{ background-image: none; } } }