带asp.net的Bootstrap Carousel无法正常工作

Question

我在asp.net中使用bootstrap传送带滑块。 我想做转发器控制轮播滑块。 但是没有用。 我能怎么做。

<div class="slider">
    <div class="container">
        <div id="about-slider">
            <div id="carousel-slider" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
               <ol class="carousel-indicators visible-xs">
                    <li data-target="#carousel-slider" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-slider" data-slide-to="1"></li>
                    <li data-target="#carousel-slider" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                     <div class="item active">
                        <asp:Repeater ID="Repeater1" runat="server">
                            <ItemTemplate>                                  
              <img src='/resimler/<%#Eval("SliderResim")%>' class="img-responsive" alt="">       
                            </ItemTemplate>
                        </asp:Repeater>
                    </div>
                   </div>
                <a class="left carousel-control hidden-xs" href="#carousel-slider" data-slide="prev">
                    <i class="fa fa-angle-left"></i>
                </a>
                <a class="right carousel-control hidden-xs" href="#carousel-slider" data-slide="next">
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>
            <!--/#carousel-slider-->
        </div>
        <!--/#about-slider-->
    </div>
</div>

Answer 1

中继器中有一个小错误。 <div class="item active">必须一起放在<ItemTemplate> 。 是div和class .item在传送带上制作幻灯片。

但是要小心，只有一个div必须具有.active ，指示应显示哪个div。 其他div应该仅具有.item类，因为轮播控件将在用户与轮播互动时动态更改.active类。

一个简单的示例，使用第一个索引设置.active类，否则仅设置.item 。

<div class="slider">
<div class="container">
    <div id="about-slider">
        <div id="carousel-slider" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
           <ol class="carousel-indicators visible-xs">
                <li data-target="#carousel-slider" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-slider" data-slide-to="1"></li>
                <li data-target="#carousel-slider" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                    <asp:Repeater ID="Repeater1" runat="server">
                        <ItemTemplate>
                    <div <%# Container.ItemIndex == 0 ? "class=\"item active\"" : "class=\"item\"" %>>
                    <img src='/resimler/<%#Eval("SliderResim")%>' class="img-responsive" alt="">
                    </div>    
                        </ItemTemplate>
                    </asp:Repeater>
               </div>
            <a class="left carousel-control hidden-xs" href="#carousel-slider" data-slide="prev">
                <i class="fa fa-angle-left"></i>
            </a>
            <a class="right carousel-control hidden-xs" href="#carousel-slider" data-slide="next">
                <i class="fa fa-angle-right"></i>
            </a>
        </div>
        <!--/#carousel-slider-->
    </div>
    <!--/#about-slider-->
</div>