If you are a fan of vertical slider like we used in Adrenaline and ConsultPress we got the good news for you. You can achieve a similar effect with the only CSS for Bolts slider. Paste the code below in your wp-admin -> Customizer -> Additional CSS and that’s it.

.jumbotron .carousel-inner { height: 100%; width: auto; }
.jumbotron .carousel-inner > .carousel-item { width: auto; transition: .6s ease-in-out top; }
@media all and (transform-3d), (-webkit-transform-3d) { .jumbotron .carousel-inner > .carousel-item { transition: .6s ease-in-out; }
.jumbotron .carousel-inner > .carousel-item.next, .jumbotron .carousel-inner > .carousel-item.active.right { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); top: 0; }
.jumbotron .carousel-inner > .carousel-item.prev, .jumbotron .carousel-inner > .carousel-item.active.left { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); top: 0; }
.jumbotron .carousel-inner > .carousel-item.next.left, .jumbotron .carousel-inner > .carousel-item.prev.right, .jumbotron .carousel-inner > .carousel-item.active { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); top: 0; } }
.jumbotron .carousel-inner > .active, .jumbotron .carousel-inner > .next, .jumbotron .carousel-inner > .prev { display: block; }
.jumbotron .carousel-inner > .active { top: 0; }
.jumbotron .carousel-inner > .active.left { top: -100%; }
.jumbotron .carousel-inner > .active.right { top: 100%; }
.jumbotron .carousel-inner > .next, .jumbotron .carousel-inner > .prev { position: absolute; top: 0; width: 100%; }
.jumbotron .carousel-inner > .next { top: 100%; }
.jumbotron .carousel-inner > .prev { top: -100%; }
.jumbotron .carousel-inner > .next.left, .jumbotron .carousel-inner > .prev.right { top: 0; }
.jumbotron__control { height: 3.33333rem; line-height: 3.33333rem; }
.jumbotron__control.left { top: calc(50% - 3.38889rem); -webkit-transform: rotate(90deg); transform: rotate(90deg); }
.jumbotron__control.right { right: inherit; left: 0; top: calc(50% - 0rem); -webkit-transform: rotate(90deg); transform: rotate(90deg); }

This is one of the many parts that can be customized with CSS. To learn how to make other CSS customizations, visit our help article How to customize your WordPress site with CSS.