使用幻灯片为 Bootstrap 轮播控件设置动画。答案

【问题标题】：Animate Bootstrap Carousel Controls with the Slides.使用幻灯片为 Bootstrap 轮播控件设置动画。
【发布时间】：2017-01-27 17:27:27
【问题描述】：

考虑一个标准的 Bootstrap 轮播：http://codepen.io/anon/pen/mRBvdp

默认情况下，轮播控件在每个轮播图像滑入时保持静止。

有没有办法让轮播控件与幻灯片一起动画？换句话说，有没有办法让所有东西一起滑入，图像和两个控件？这样看起来控件会随着图像一起移动？

标准引导轮播的 HTML：

<div class="container">

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
  <div class="item active">
    <img src="https://unsplash.it/1400/600?image=194">
  </div>
  <div class="item">
    <img src="https://unsplash.it/1400/600?image=315">
  </div>
  <div class="item">
    <img src="https://unsplash.it/1400/600?image=315">
  </div>
  <div class="item">
    <img src="https://unsplash.it/1400/600?image=622">
  </div>
  <div class="item">
    <img src="https://unsplash.it/1400/600?image=401">
  </div>
</div>

<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>

【问题讨论】：

你为什么要这样做？从用户的角度来看，这只会让他们感到困惑，我认为这是一个坏主意。
这不是我的决定，这是客户的决定。
我不认为引导程序具有该功能。尝试创建自己的脚本并将间隔时间同步到幻灯片。
实际上我得到了这个工作，我所做的只是在每个轮播标题中包含箭头，然后使轮播控件透明并将它们绝对定位在箭头之上。它现在给出了他们正在移动的效果，即使它不是。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

您是否尝试将指示器移动到轮播项目内？

这是bootply，它似乎对我有用

<div class="container">

<div class="container">
    <div class="span8">
    <div id="myCarousel" class="carousel slide">
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class=""></li>
            <li data-target="#myCarousel" data-slide-to="1" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="2" class=""></li>
        </ol>
        <div class="carousel-inner">
            <div class="item">
                <img src="//placehold.it/640x480" class="img-responsive">
                <div class="carousel-caption">
                    <h4>First Thumbnail label</h4>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
                <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
            </div>
            <div class="item active">
                <img src="//placehold.it/640x480" class="img-responsive">
                <div class="carousel-caption">
                    <h4>Second Thumbnail label</h4>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
                <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
            </div>
            <div class="item">
                <img src="//placehold.it/640x480" class="img-responsive">
                <div class="carousel-caption">
                    <h4>Third Thumbnail label</h4>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
                <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
            </div>
        </div>

    </div>
    </div>
</div>

</div>

【讨论】：