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;">