Question

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

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

有没有办法让旋转木马控件使用幻灯片进行动画处理？换句话说，有没有办法让所有内容一次滑入，图像和两个控件？所以看起来控件随图像一起移动？

标准Bootstrap轮播的HTML：

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

 <ComboBox x:Name="comboBox1" HorizontalAlignment="Left" Margin="84,70,0,0" VerticalAlignment="Top" Width="230" FontWeight="ExtraBold">
        <ComboBox.Resources>
            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}">Transparent</SolidColorBrush>
            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}">Black</SolidColorBrush>
        </ComboBox.Resources>
        <ComboBox.ItemContainerStyle>
            <Style TargetType="ComboBoxItem">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Value}" Value="Agriculture">
                        <Setter Property="Background" Value="Green" />
                    </DataTrigger>

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>

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

1 个答案: