Question

我在asp.net中使用bootstrap carousel滑块。我想做转发器控制旋转木马滑块。但不行。我该怎么办。

<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和类.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>

使用asp.net的Bootstrap Carousel无效

1 个答案: