相关疑难解决方法(0)

bootstrap carousel中是否有任何选项可以将其设置为从上到下,从下到上,而不是从右到左,从左到右.

的jsfiddle

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1" class=""></li>
        <li data-target="#myCarousel" data-slide-to="2" class=""></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <div class="container">
                <div class="carousel-caption">
                     <h1>Example headline.</h1>

                    <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="container">
                <div class="carousel-caption">
                     <h1>Another example headline.</h1>

                    <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="container">
                <div class="carousel-caption">
                     <h1>One more for good …

我正在尝试在Bootstrap 4 Alpha 6中创建一个垂直方向的旋转木马.我仍然无法弄清楚为什么Bootstrap的人不包括这个方向,但我接近我的解决方案拥有.我似乎在我的CSS中遗漏了一些东西,但似乎无法放置它.

在JSFIDDLE上查看我的演示

我的问题是旋转木马滑梯的非向上流体运动.幻灯片从底部上升,但在结束时不再继续 - 相反消失.

我正在构建这个代码来编译使用BS3执行此操作的旧方法,并尝试尽可能地匹配新的CSS类.这是我的代码,任何帮助解决这个谜团将非常感激.

HTML

<!-- Bootstrap Carousel -->
<div id="testCarousel" class="carousel slide vertical" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#testCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#testCarousel" data-slide-to="1"></li>
        <li data-target="#testCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
            <img class="d-block img-fluid" src="//placehold.it/2500x750" alt="First slide">
        </div>
        <div class="carousel-item">
            <img class="d-block img-fluid" src="//placehold.it/2500x750" alt="Second slide">
        </div>
        <div class="carousel-item">
            <img class="d-block img-fluid" src="//placehold.it/2500x750" alt="Third slide">
        </div>
     </div>
</div>

CSS

/* Just for Example Purposes */
body {
  background: #333
} …