Question

我正在尝试使用ASP.Net Repeater控件创建一个包含动态数据的轮播。这就是我想要的样子：

上面的图像是用静态数据完成的，我想把它转换为使用动态数据，到目前为止我所取得的成就。

以下是上述动态轮播的代码。

    <div id="myCarousel" class="carousel slide container vertical" data-ride="carousel" data-interval="false">

            <ol class="carousel-indicators video-items">
                <asp:Repeater runat="server" ID="IndicatorRepeater">
                    <ItemTemplate>
                        <li data-target="#myCarousel" data-slide-to="<%# (Container.ItemIndex)%>" class="<%# (Container.ItemIndex == 0 ? "active" : "") %>"></li>
                    </ItemTemplate>
                </asp:Repeater>
            </ol>
            <div class="carousel-inner" role="listbox">
                <asp:Repeater runat="server" ID="ItemRepeater">
                    <ItemTemplate>
                        <div class="item <%# (Container.ItemIndex == 0 ? "active" : "") %>">
                            <div class="row">
                                <div class="col-md-5 col-xs-3">
                                    <a href="#" class="players" title='<%# Eval("LinkDescription").ToString() %>'>
                                            <img class="img-responsive" src="<%# Eval("ImgSrc").ToString() %>" alt="<%# Eval("Title").ToString() %>">
                                        </a>
                                </div>
                                <div class="col-md-7 page-text">
                                    <%# Eval("Title").ToString() %>
                                    <br />
                                    <span>Season: 2015</span>

                                </div>
                            </div>
                        </div>
                        <div class="push"></div>
                    </ItemTemplate>
                </asp:Repeater>

            </div>
            <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>

            <!-- /.carousel -->

        </div>

有人知道如何展示多张图片或所有图片吗？

Answer 1

我最后通过使用像这样的ol元素包装ASP.Net Repeater来解决这个问题。

      <div class="carousel-inner">                                           
                    <ol>                        
                            <asp:Repeater runat="server" ID="ItemRepeater">
                                <ItemTemplate>
                                    <div class="item <%# (Container.ItemIndex == 0 ? "active" : "") %>">
                                        <div class="row">
                                            <div class="col-md-5 col-xs-3">
                                                <img class="img-responsive" src="<%# Eval("ImgSrc").ToString() %>" alt="<%# Eval("Title").ToString() %>">
                                            </div>
                                            <div class="col-md-7 page-text">
                                                <%# Eval("Title").ToString() %>
                                                <br />
                                                <span>Season: 2015</span>
                                            </div>
                                        </div>
                                        <div class="push"></div>
                                    </div>
                                </ItemTemplate>
                            </asp:Repeater>

                    </ol>             
                </div>

我仍然遇到数据幻灯片无法正常工作的问题，但至少显示了滑块图片。

将Bootstrap Carousel转换为ASP.Net Repeater

1 个答案: