使用幻灯片动画Bootstrap Carousel控件。

Question

Consider a standard Bootstrap carousel: http://codepen.io/anon/pen/mRBvdp

By default the carousel controls stay stationary while each carousel image slides in.

Is there a way to make the carousel controls animate with the slide? In other words is there a way to make everything slide in together at once, the image and both the controls? So that it looks like the controls are moving with the image?

HTML for the standard Bootstrap carousel:

<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

Have you try to just move the indicator inside the carousel items ?

Here is a bootply , it seems to work for me

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