带有 asp.net 网络表单转发器的轮播答案

【问题标题】：Carousel with asp.net web forms repeater带有 asp.net 网络表单转发器的轮播
【发布时间】：2022-01-13 07:40:35
【问题描述】：

我正在尝试在 asp.net 网络表单中的转发器内制作轮播。它有效，但问题是它在一行中只显示一张牌，而不是每行三张牌！我试图找到一个解决方案，但没有什么适合我！

请你帮帮我。

这是结果： 1 这就是它应该是的样子： 2

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <title>Snippet - GoSNippets</title>
    <link href='https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css' rel='stylesheet'>
    <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'>
    <style></style>
    <script type='text/javascript' src=''></script>
    <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js'></script>
    <script type='text/javascript' src='https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js'></script>
</head>

<body oncontextmenu='return false' class='snippet-body'>
    <section class="pt-5 pb-5">
        <div class="container">
            <div class="row">
                <div class="col-6">
                    <h3 class="mb-3">Carousel cards title </h3>
                </div>
                <div class="col-6 text-right">
                    <a class="btn btn-primary mb-3 mr-1" href="#carouselExampleIndicators2" role="button" data-slide="prev">
                        <i class="fa fa-arrow-left"></i>
                    </a>
                    <a class="btn btn-primary mb-3 " href="#carouselExampleIndicators2" role="button" data-slide="next">
                        <i class="fa fa-arrow-right"></i>
                    </a>
                </div>
                <div class="col-12">
                    <div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel">
                        <div class="carousel-inner">
                            <div class="row">
                                <asp:Repeater ID="repeaterUpcomingShows" runat="server">
                                    <ItemTemplate>
                                        <div class="carousel-item <%# Container.ItemIndex == 0 ? "item active" : "item" %>">
                                            <div class="col-md-4 mb-3">
                                                <div class="card">
                                                    <img class="img-fluid" src="assets/img/scenery/<%# Eval("showImageLink") %>">
                                                    <div class="card-body">
                                                        <h4 class="card-title"><%# Eval("showName") %></h4>
                                                        <p class="card-text"><%# Eval("showStartDate") %></p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </ItemTemplate>
                                </asp:Repeater>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <script type='text/javascript'></script>
</body>
</html>

下面是代码：

public partial class WebForm1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        getGallaryDetails();
    }


    private void getGallaryDetails()
    {
        CRUD myCrud = new CRUD();
        string mySql = @"select * from shows  where showGalleryID=" + 1;

       // DataTable dt = myCrud.getDtPassSql(mySql);
        
        DataSet ds = myCrud.getDsPassSql(mySql);
        repeaterUpcomingShows.DataSource = ds;
        repeaterUpcomingShows.DataBind();


    }
}

【问题讨论】：

标签： javascript c# asp.net bootstrap-4 webforms

【解决方案1】：

bootstrap 的轮播似乎没有将多个轮播项目放在一张幻灯片中的选项。对您来说最简单的解决方案可能是使用 bootstrap 以外的其他东西 - 还有其他 javascript 插件可以做一些更像您正在寻找的东西；我最熟悉的一个是 Slick https://kenwheeler.github.io/slick/。

【讨论】：