.carousel .carousel-inner > .carousel-item {
    transition: 1s ease-out;
    transform: translate3d(100%, 0, 0);
    top: 0;
    background: #ccc;
    width: 100%;
    min-height: 300px;

}


.carousel .carousel-inner > .carousel-item-next,
.carousel .carousel-inner > .carousel-item-prev,
.carousel .carousel-inner > .carousel-item-start {
    transform: translate3d(100%, 0, 0);
    top: 0;
}

.carousel .carousel-inner > .carousel-item-end,
.carousel .carousel-inner > .carousel-item-start,
.carousel .carousel-inner > .carousel-item-prev.carousel-item-start,
.carousel .carousel-inner > .carousel-item-next.carousel-item-end,
.carousel .carousel-inner > .active {
    transform: translate3d(0, 0, 0);
    top: 0;
}

.carousel .carousel-inner > .active.carousel-item-start,
.carousel .carousel-inner > .active.carousel-item-end {
    transform: translate3d(-100%, 0, 0);
    top: 0;
}