Bootstrap 3 carousel Verical direction

vetical-carousel.less

/* Corusel vertical */
.carousel-inner.vertical {
    height: 100%;
    >.item {
        -webkit-transition: .6s ease-in-out top;
        -o-transition: .6s ease-in-out top;
        transition: .6s ease-in-out top;
    }
    >.active {
        top: 0;
    }
    >.next {
        top: 0;
        height: 100%;
        width: 100%;
        left: 0;
        top: 100%;
    }
    >.prev {
        top: 0;
        height: 100%;
        width: 100%;
        left: 0;
        top: -100%;
    }
    >.next.left {
        top: 0;
    }
    >.prev.right {
        top: 0;
    }
    >.active.left {
        left: 0;
        top: -100%;
    }
    >.active.right {
        left: 0;
        top: 100%;
    }
}
@media all and (transform-3d) {
    .carousel-inner.vertical {
        >.item {
            -webkit-transition: -webkit-transform .6s ease-in-out;
            -o-transition: -o-transform .6s ease-in-out;
            transition: transform .6s ease-in-out;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-perspective: 1000;
            perspective: 1000;
        }
        >.item.next {
            top: 0;
            -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
        }
        >.item.active.right {
            top: 0;
            -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
        }
        >.item.prev {
            top: 0;
            -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
        }
        >.item.active.left {
            top: 0;
            -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
        }
        >.item.next.left {
            top: 0;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
        >.item.prev.right {
            top: 0;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
        >.item.active {
            top: 0;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
    }
}
@media (-webkit-transform-3d) {
    .carousel-inner.vertical {
        >.item {
            -webkit-transition: -webkit-transform .6s ease-in-out;
            -o-transition: -o-transform .6s ease-in-out;
            transition: transform .6s ease-in-out;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-perspective: 1000;
            perspective: 1000;
        }
        >.item.next {
            top: 0;
            -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
        }
        >.item.active.right {
            top: 0;
            -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
        }
        >.item.prev {
            top: 0;
            -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
        }
        >.item.active.left {
            top: 0;
            -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
        }
        >.item.next.left {
            top: 0;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
        >.item.prev.right {
            top: 0;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
        >.item.active {
            top: 0;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
    }
}