#carousel fade

NOTE: Be sure to locate your stylesheet files below  bootstrap.css  style file. Than  browsers will apply modyfined properties and overwrite Bootstrap properties by default.

Changing the direction of the slides in the carousel to vertical

Take a look to the Vertical Carousel CSS3 properties

.vertical .carousel-inner { height: 100%; } .carousel.vertical .item { -webkit-transition: 0.6s ease-in-out top; -moz-transition: 0.6s ease-in-out top; -ms-transition: 0.6s ease-in-out top; -o-transition: 0.6s ease-in-out top; transition: 0.6s ease-in-out top; } .carousel.vertical .active { top: 0; } .carousel.vertical .next { top: 400px; } .carousel.vertical .prev { top: -400px; } .carousel.vertical .next.left, .carousel.vertical .prev.right { top: 0; } .carousel.vertical .active.left { top: -400px; } .carousel.vertical .active.right { top: 400px; } .carousel.vertical .item { left: 0; }

Code: http://bootply.com/63148

Demo: http://bootply.com/render/63148

Carousel with Fade effect

Unfortunately the default bootstrap carousel does not provide fade effect. So here's the code to quickly create the desired effect.

Demo: http://bootply.com/64693

Code: http://bootply.com/render/64693

Bootstrap carousel with multi items

It is often necessary to show in the carousel several positions at the same time(multi items), it is ideally reduces site space, allows you to show just a lot of positions, such as products or customers logos or anything

If you need mobile stacked items here is the solution

@media (max-width: 767px){ .carousel .row .span3 { display: block; float: left; width: 25%; margin-left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } }

Code: http://bootply.com/64680