使用幻燈片動畫Bootstrap Carousel控件。

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>