javascript - Vertical slider in bootstrap -
<div class="container"> <div class="row"> <div class="col-md-2 col-xs-12"> <div class="carousel thin" style="height: 300px;"> <a class="prev"><span class="glyphicon glyphicon-chevron-up"></span></a> <div class="window"> <ul class="clr"> <li class="item"> <img src="http://lorempixel.com/150/150/sports" alt="#img desc#" width="150" height="150"> </li> <li class="item"> <img src="http://lorempixel.com/150/150" alt="#img desc#" width="150" height="150"> </li> <li class="item"> <img src="http://lorempixel.com/150/150/sports" alt="#img desc#" width="150" height="150"> </li> <li class="item"> <img src="http://lorempixel.com/150/150" alt="#img desc#" width="150" height="150"> </li> <li class="item"> <img src="http://lorempixel.com/150/150/sports" alt="#img desc#" width="150" height="150"> </li> <li class="item"> <img src="http://lorempixel.com/150/150" alt="#img desc#" width="150" height="150"> </li> <li class="item"> <img src="http://lorempixel.com/150/150/sports" alt="#img desc#" width="150" height="150"> </li> <li class="item"> <img src="http://lorempixel.com/150/150" alt="#img desc#" width="150" height="150"> </li> <li class="item"> <img src="http://lorempixel.com/150/150/sports" alt="#img desc#" width="150" height="150"> </li> <li class="item"> <img src="http://lorempixel.com/150/150" alt="#img desc#" width="150" height="150"> </li> <li class="item"> <img src="http://lorempixel.com/150/150/sports" alt="#img desc#" width="150" height="150"> </li> </ul> </div> <!-- .window --> <a class="next"><span class="glyphicon glyphicon-chevron-down"></span></a> </div> <!-- .carousel --> </div> <div class="col-md-10 col-xs-12"> <h2>vertical bootstrap carousel-snippet</h2></br> <h3>by andreas nemeseri, bootsnippet tobias zimmermann</h3> <p>http://nemeseri.com/ender-carousel/</p> </div> </div>
above html vertical slider.
the fiddle carousels : https://jsfiddle.net/0kr57bnm/
in mentioned fiddle, can see there 2 more sliders along this. last slider 1 talking about. when page has vertical slider, works. when along other 2 carousels, navigation buttons not work. not able change width of carousel.
i have used code vertical slider https://bootsnipp.com/snippets/k2dz3
where going wrong?
any kind of appreciated. thanks.
for vertical slider forgot initialize carousel.
in jquery onload add:
$(".vertical").carousel({ vertical: true });
change div vertical carousel from:
<div class="carousel thin" style="height: 300px;">
to
<div class="carousel thin vertical" style="height: 300px;">
Comments
Post a Comment