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>

以上是垂直滑块的html。

旋转木马的小提琴：https://jsfiddle.net/0kr57bnm/

在上面提到的小提琴中，您可以看到还有2个滑块随之而来。最后一个滑块是我正在谈论的那个。当页面只有垂直滑块时，它可以工作。但是当与其他2个旋转木马一起使用时，其导航按钮不起作用。此外，我无法改变旋转木马的宽度。

我使用了来自https://bootsnipp.com/snippets/k2dz3

的垂直滑块的代码

我哪里错了？

任何形式的帮助将不胜感激。感谢。

Answer 1

对于垂直滑块，您忘记初始化轮播。

在jQuery onload中添加：

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

从以下位置更改垂直轮播的div：

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

到

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

引导程序中的垂直滑块

1 个答案: