javascript - Bootstrap 中的垂直 slider

Question

<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 by Tobias Zimmermann</h3>
        <p>http://nemeseri.com/ender-carousel/</p>
    </div>
</div>

以上是垂直 slider 的 html。

旋转木马的 fiddle :https://jsfiddle.net/0kr57bnm/

在提到的 fiddle 中，您可以看到还有 2 个 slider 。最后一个 slider 是我正在谈论的那个。当页面只有垂直 slider 时，它可以工作。但是当与其他 2 个轮播一起使用时，它的导航按钮不起作用。我也无法更改轮播的宽度。

我使用了来自 https://bootsnipp.com/snippets/k2dz3 的垂直 slider 代码

我哪里错了？

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

对于垂直 slider ，您忘记了初始化轮播。

在 jQuery onload 中添加:

$(".vertical").carousel({
    vertical: true
});

更改垂直轮播的 div:

<div class="carousel thin" style="height: 300px;">

到

<div class="carousel thin vertical" style="height: 300px;">