我尝试使用bootstrap-4-carousel作为链接中的示例 bootstrap-4-carousel在asp：转发器中，因此图像将带到表单数据库。我尝试按照以下常规功能选择图片
SqlDataAdapter da;
da = new SqlDataAdapter(@"select * from ImageTable
order by NEWID()", constr);
DataTable dt = new DataTable();
da.Fill(dt);
rptImages.DataSource = dt;
rptImages.DataBind();
以及分页，如下所示：
public int CurrentPageEN
{
get
{
if (this.ViewState["CurrentPageEN"] == null)
return 0;
else
return Convert.ToInt16(this.ViewState["CurrentPageEN"].ToString());
}
set { this.ViewState["CurrentPageEN"] = value; }
}
private void doPagingEN()
{
DataTable dt = new DataTable();
dt.Columns.Add("PageIndexEN");
dt.Columns.Add("PageTextEN");
for (int i = 0; i < pdsEN.PageCount; i++)
{
DataRow dr = dt.NewRow();
dr[0] = i;
dr[1] = i + 1;
dt.Rows.Add(dr);
}
dlPagingEN.DataSource = dt;
dlPagingEN.DataBind();
}
protected void BindDataEN()
{
DataSet ds = new DataSet();
SqlConnection con = new SqlConnection(constr);
SqlCommand cmd;
con.Open();
cmd = new SqlCommand(@"select * from imageTable order by NEWID()", con);
SqlDataAdapter adp = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
adp.Fill(dt);
pdsEN.DataSource = dt.DefaultView;
pdsEN.AllowPaging = true;
pdsEN.PageSize = 4;
pdsEN.CurrentPageIndex = CurrentPageEN;
// Repeater1.DataSource = pdsEN;
// Repeater1.DataBind();
doPagingEN();
}
protected void dlPaging_ItemCommandEN(object source, DataListCommandEventArgs e)
{
if (e.CommandName.Equals("lnkbtENagingEN"))
{
CurrentPageEN = Convert.ToInt16(e.CommandArgument.ToString());
BindDataEN();
}
}
这是aspx代码
<style>
.blog .carousel-indicators {
left: 0;
top: auto;
bottom: -40px;
}
/* The colour of the indicators */
.blog .carousel-indicators li {
background: #a3a3a3;
border-radius: 50%;
width: 8px;
height: 8px;
}
.blog .carousel-indicators .active {
background: #707070;
}
</style>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row blog">
<div class="col-md-12">
<div id="blogCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<asp:Repeater ID="dlPagingEN" runat="server">
<ItemTemplate>
<li data-target="#blogCarousel" data-slide-to='<%#Eval("PageTextEN") %>'>
<asp:LinkButton ID="lnkbtENagingEN" runat="server" CommandName="lnkbtENagingEN" CommandArgument='<%#Eval("PageIndexEN")%>'></asp:LinkButton>
</li>
</ItemTemplate>
</asp:Repeater>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="col-md-3">
<a href="#">
<img src='<%#Eval("ImagePaths")%>' alt="Image" style="max-width: 100%;">
</a>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
<!--.row-->
</div>
</div>
<!--.carousel-inner-->
</div>
<!--.Carousel-->
</div>
</div>
</div>
，但是我所做的任何操作都无法使链接中的示例作为滑块。 因此，如果有人有解决方案，请帮助我。
谢谢大家
答案 0 :(得分：0)
基本上，发生的事情是您为转盘准备了一张“幻灯片”，并将所有图像放入一张幻灯片中。
现在，问题顶部提供的链接在转盘的每个“幻灯片”上都有3张小图像。关于绑定控件，这有点复杂，所以让我们退后一步，每张幻灯片仅获得1张图像即可开始。
要在每张幻灯片上获取1张图片，您需要修改中继器aspx使其工作如下：
<div class="carousel-inner">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="carousel-item">
<a href="#">
<img src='<%#Eval("ImagePaths")%>' alt="Image" style="max-width: 100%;">
</a>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
这里要指出的是，每个幻灯片都是具有“轮播项目”类的div。通过将其包含在转发器的ItemTemplate中，这意味着每张图像将是一张唯一的幻灯片。
现在，对于dlPagingEn转发器，您将希望摆脱嵌入在其中的linkbutton。概念是幻灯片的所有图像都应包含在页面上，并且dlPagingEn控件将允许客户端访问各种幻灯片。您不需要为此行为执行到服务器的往返。
现在是坏消息。像提供的链接中那样，使Repeater吐出每张幻灯片3张图像的代码要困难得多。我在下面的中继器代码中提到过的最简单的方法可能是在ItemTemplate中包含一个函数。该功能需要做的是跟踪数据项记录号，并为每第3张图像关闭行和转盘项div，然后重新打开它们。
<div class="carousel-inner">
<asp:Repeater ID="Repeater1" runat="server">
<headerTemplate>
<div class="carousel-item">
<div class="row">
</headerTemplate>
<ItemTemplate>
<%# BuildCarouselItemSeperator() %>
<div class="col-md-3">
<a href="#">
<img src='<%#Eval("ImagePaths")%>' alt="Image" style="max-width: 100%;">
</a>
</div>
</ItemTemplate>
<footerTemplate>
</div>
</div>
</footerTemplate>
</asp:Repeater>
</div>
现在，如果您可以修改SQL（查询或表本身），以使您要绑定到中继器的返回数据集的每一行都具有3个不同的图像记录而不是一个，则这确实成为一个容易得多。在这种情况下，您将使用以下样式的中继器声明：
<div class="carousel-inner">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="carousel-item">
<div class="row">
<div class="col-md-3">
<a href="#">
<img src='<%#Eval("ImagePaths_A")%>' alt="Image" style="max-width: 100%;">
</a>
</div>
<div class="col-md-3">
<a href="#">
<img src='<%#Eval("ImagePaths_B")%>' alt="Image" style="max-width: 100%;">
</a>
</div>
<div class="col-md-3">
<a href="#">
<img src='<%#Eval("ImagePaths_C")%>' alt="Image" style="max-width: 100%;">
</a>
</div>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
实际上，要获得每张幻灯片3张图像，实际上可能比使用Repeater通过StringBuilder在后面的代码中构建HTML，然后将其放入文字控件中更为幸运。
答案 1 :(得分：0)
我找到了一个ASP和Bootstrap解决方案
诀窍是让“ IF”将第一个索引标识为“ ACTIVE”，然后添加其他索引而没有“ ACTIVE”
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class=" container carousel-inner">
<asp:Repeater ID="rpt_Propiedades" runat="server">
<ItemTemplate>
<div class="carousel-item <%# (IIf(Container.ItemIndex = 0, "active", ""))%>">
<%# Eval("Nombre Columna") %>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</div>