javascript - 使用幻灯片制作 Bootstrap 轮播控件动画。

Question

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

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

有没有办法让轮播控件随幻灯片一起动画化？ 换句话说，有没有办法让所有内容(图像和两个控件)同时滑入在一起？这样看起来控件就会随着图像一起移动？

标准 Bootstrap 轮播的 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>

Answer 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>