"Vertical & horizontal slider / Carousel"
Bootstrap 3.0.0 Snippet by sajawal

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-9"> <div id="carousel-main" class="carousel slide " data-ride="carousel" data-interval="5000"> <!-- Carousel items --> <div class="carousel-inner"> <div class="active item"> <img src="http://placehold.it/900/f44336/000000&text=First+Slide" class="img-responsive"> </div> <div class="item"> <img src="http://placehold.it/900/e91e63/000000&text=Second+Slide" class="img-responsive"> </div> <div class="item"> <img src="http://placehold.it/900/9c27b0/000000&text=Third+Slide" class="img-responsive"> </div> </div> <!-- Controls --> <a class="left carousel-control" href=".carousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href=".carousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <div class="col-md-3"> <div id="carousel-pager" class="carousel slide " data-ride="carousel" data-interval="1000"> <!-- Carousel items --> <div class="carousel-inner vertical"> <div class="active item"> <img src="http://placehold.it/600/f44336/000000&text=First+Slide" class="img-responsive" data-target="#carousel-main" data-slide-to="0"> </div> <div class="item"> <img src="http://placehold.it/600/e91e63/000000&text=Second+Slide" class="img-responsive" data-target="#carousel-main" data-slide-to="1"> </div> <div class="item"> <img src="http://placehold.it/600/9c27b0/000000&text=Third+Slide" class="img-responsive" data-target="#carousel-main" data-slide-to="2"> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-pager" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-pager" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </div> </div>
.carousel-inner.vertical { height: 100%; /*Note: set specific height here if not, there will be some issues with IE browser*/ } .carousel-inner.vertical > .item { -webkit-transition: .6s ease-in-out top; -o-transition: .6s ease-in-out top; transition: .6s ease-in-out top; } @media all and (transform-3d), (-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; } .carousel-inner.vertical > .item.next, .carousel-inner.vertical > .item.active.right { -webkit-transform: translate3d(0, 33.33%, 0); transform: translate3d(0, 33.33%, 0); top: 0; } .carousel-inner.vertical > .item.prev, .carousel-inner.vertical > .item.active.left { -webkit-transform: translate3d(0, -33.33%, 0); transform: translate3d(0, -33.33%, 0); top: 0; } .carousel-inner.vertical > .item.next.left, .carousel-inner.vertical > .item.prev.right, .carousel-inner.vertical > .item.active { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); top: 0; } } .carousel-inner.vertical > .active { top: 0; } .carousel-inner.vertical > .next, .carousel-inner.vertical > .prev { top: 0; height: 100%; width: auto; } .carousel-inner.vertical > .next { left: 0; top: 33.33%; right:0; } .carousel-inner.vertical > .prev { left: 0; top: -33.33%; right:0; } .carousel-inner.vertical > .next.left, .carousel-inner.vertical > .prev.right { top: 0; } .carousel-inner.vertical > .active.left { left: 0; top: -33.33%; right:0; } .carousel-inner.vertical > .active.right { left: 0; top: 33.33%; right:0; } #carousel-pager .carousel-control.left { bottom: initial; width: 100%; } #carousel-pager .carousel-control.right { top: initial; width: 100%; }
$('.carousel .vertical .item').each(function(){ var next = $(this).next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); for (var i=1;i<2;i++) { next=next.next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); } });

Related: See More


Questions / Comments: