<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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" style="padding:20px;"> <div class="row panel panel-info"> <div class="panel-heading text-center"> <h2>Slider Vertical con videos</h2> </div> <div class="col-xs-8 col-sm-6 col-md-6" style="padding:20px;"> <div id="myCarousel" class="vertical-slider carousel vertical slide col-md-12" data-ride="carousel"> <div class="row"> <div class="col-md-4"> <span data-slide="next" class="btn-vertical-slider glyphicon glyphicon-circle-arrow-up " style="font-size: 30px"></span> </div> <div class="col-md-8"> </div> </div> <br /> <!-- Carousel items --> <div class="carousel-inner"> <div class="item active"> <div class="row"> <div class="col-xs-8 col-sm-8 col-md-8"> <iframe width="300" height="150" src="https://www.youtube.com/embed/r8Xv4sRNE7w" frameborder="0" allowfullscreen></iframe> </div> <div class="col-xs-4 col-sm-4 col-md-4 text-center"> Este el video #1 del slider vertical </div> </div> <!--/row-fluid--> </div> <!--/item--> <div class="item"> <div class="row"> <div class="col-xs-8 col-sm-8 col-md-8"> <iframe width="300" height="150" src="https://www.youtube.com/embed/r8Xv4sRNE7w" frameborder="0" allowfullscreen></iframe> </div> <div class="col-xs-4 col-sm-4 col-md-4 text-center"> Este el video #2 del slider vertical </div> </div> <!--/row-fluid--> </div> <!--/item--> <!--/item--> <div class="item"> <div class="row"> <div class="col-xs-8 col-sm-8 col-md-8"> <iframe width="300" height="150" src="https://www.youtube.com/embed/r8Xv4sRNE7w" frameborder="0" allowfullscreen></iframe> </div> <div class="col-xs-4 col-sm-4 col-md-4 text-center"> Este el video #3 del slider vertical </div> </div> <!--/row-fluid--> </div> <!--/item--> <!--/item--> <div class="item"> <div class="row"> <div class="col-xs-8 col-sm-8 col-md-8"> <iframe width="300" height="150" src="https://www.youtube.com/embed/r8Xv4sRNE7w" frameborder="0" allowfullscreen></iframe> </div> <div class="col-xs-4 col-sm-4 col-md-4 text-center"> Este el video #4 del slider vertical </div> </div> <!--/row-fluid--> </div> <!--/item--> </div> <div class="row"> <div class="col-md-4"> <span data-slide="prev" class="btn-vertical-slider glyphicon glyphicon-circle-arrow-down" style="color: Black; font-size: 30px"></span> </div> <div class="col-md-8"> </div> </div> </div> </div> </div> </div>

.btn-vertical-slider{ margin-left:35px; cursor:pointer;} a { cursor:pointer;} .carousel.vertical .carousel-inner .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: 100%; } .carousel.vertical .prev { top: -100%; } .carousel.vertical .next.left, .carousel.vertical .prev.right { top: 0; } .carousel.vertical .active.left { top: -100%; } .carousel.vertical .active.right { top: 100%; } .carousel.vertical .item { left: 0; }

$(document).ready(function () { $('.btn-vertical-slider').on('click', function () { if ($(this).attr('data-slide') == 'next') { $('#myCarousel').carousel('next'); } if ($(this).attr('data-slide') == 'prev') { $('#myCarousel').carousel('prev') } }); });