Question

我有一个Bootstrap JS Carousel，它显示了我存储在项目文件夹中的一些图像。

从SQL Server数据库中检索每个图像的文件路径，图像显示在轮播中。

正在显示图像，但我的问题是，当它到达最终图像时，而不是再次开始幻灯片放映（在第一张图像上），不会显示任何其他内容。

有谁知道如何在最终的iamge之后显示第一张图片？就像在循环中一样。

以下是我的ASPX：

                    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-pause="hover">
                    <div class="carousel-inner" role="listbox">
                        <!-- Wrapper for slides -->
                        <asp:Repeater ID="Rgallary" runat="server">
                            <ItemTemplate>
                                <div class="item <%# (Container.ItemIndex == 0 ? "active" : "") %>">
                                    <asp:Image ID="imgId" runat="server" ImageUrl='<%# Bind("Company_Logo_Path", "~/Company_Logo/{0}") %>' />
                                </div>
                            </ItemTemplate>
                        </asp:Repeater>
                        <!-- Left and right controls -->
                        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left"></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"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                    <div class="carousel-caption">
                        Local Companies
                    </div>
                </div>

这是我背后的代码：

 protected void Page_Load(object sender, EventArgs e)
    {
        bindslide();
    }
    public void bindslide()
    {
        SqlConnection conn;
        string connectionStringR = ConfigurationManager.ConnectionStrings[
            "ConnectionString"].ConnectionString;
        conn = new SqlConnection(connectionStringR);
        SqlCommand cmd = new SqlCommand("SELECT * FROM ImagesTable", conn);
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        da.Fill(ds);
        Rgallary.DataSource = ds;
        Rgallary.DataBind();
        conn.Dispose();
        conn.Close();
    }

Answer 1

我发现了什么问题。

我查看了Bootstrap文档，发现我在转发器外面遗漏了这个标签：

<div class="carousel-inner" role="listbox">

以下解决方案按预期工作：

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-pause="hover">
                    <div class="carousel-inner" role="listbox">
                        <!-- Wrapper for slides -->
                        <div class="carousel-inner" role="listbox">
                            <asp:Repeater ID="Rgallary" runat="server">
                                <ItemTemplate>
                                    <div class="item <%# (Container.ItemIndex == 0 ? "active" : "") %>">
                                        <asp:Image ID="imgId" runat="server" ImageUrl='<%# Bind("Company_Logo_Path", "~/Company_Logo/{0}") %>' />
                                    </div>
                                </ItemTemplate>
                            </asp:Repeater>
                        </div>
                        <!-- Left and right controls -->
                        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left"></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"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                    <div class="carousel-caption">
                        Local Companies
                    </div>
                </div>

图像幻灯片停止在最终图像之后显示

1 个答案: