使用 asp:repeater 控件的多个 bootstrap 滑块

Question

我必须在单个页面中使用多个 bootstrap 轮播，使用 asp 转发器控件但它不起作用，它只在页面上显示一个滑块

这是 html 和 asp 代码

    <div class="col-md-12">
        <div id="Carousel" class="carousel slide">
            <!-- Carousel items -->
            <div class="carousel-inner">
                <div class="item">
                    <div class="row">
                        <asp:Repeater runat="server" ID="Slider1">
                            <ItemTemplate>
                                <div class="col-md-2">
                                    <div class="row">
                                        <a target="_blank" href="<%# Eval("URL") %>">
                                            <img class="caption" src="../Includes/gaceta/<%# Eval("Titulo") %>/files/res/pages/page_0000.jpg" alt="<%# Eval("Titulo") %>" width="188" height="222" /></a>
                                    </div>
                                </div>
                            </ItemTemplate>
                        </asp:Repeater>
                    </div>
                    <!--.row-->
                </div>
            </div>
            <!--.carousel-inner-->
            <a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a>
            <a data-slide="next" href="#Carousel" class="right carousel-control">›</a>
        </div>
        <!--.Carousel-->
    </div>


    <hr />
    <div class="col-md-12">
        <div id="Carousel2" class="carousel slide">
            <!-- Carousel items -->
            <div class="carousel-inner">
                <div class="item">
                    <div class="row">
                       <asp:Repeater runat="server" ID="Slider2">
                            <ItemTemplate>
                                <div class="col-md-2">
                                    <div class="row">
                                        <a target="_blank" href="<%# Eval("URL") %>">
                                            <img class="caption" src="../Includes/gaceta/<%# Eval("Titulo") %>/files/res/pages/page_0000.jpg" alt="<%# Eval("Titulo") %>" width="188" height="222" /></a>
                                    </div>
                                </div>
                            </ItemTemplate>
                        </asp:Repeater>
                    </div>
                    <!--.row-->
                </div>
            </div>
            <!--.carousel-inner-->
            <a data-slide="prev" href="#Folletos" class="left carousel-control">‹</a>
            <a data-slide="next" href="#Folletos" class="right carousel-control">›</a>
        </div>
        <!--.Carousel-->

javascript

      $(document).ready(function () {
    $('#Carousel').carousel('pause');
    $('#Carousel2').carousel('pause');

    $("div.item:first").addClass("active");
});

以及绑定转发器的方法

 protected void Page_Load(object sender, EventArgs e)
    {        
       BindSlider1(5);
       BindSlider2(1);
    }


    protected void BindSlider1(int Ubicacion)
    {
        using (SqlConnection con = Conexion.Conecta())
        {
            using (SqlCommand cmd = new SqlCommand("SelGacetaUbicacion", con))
            {
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Parameters.Add("@UBICACION", SqlDbType.Int).Value = Ubicacion;
                con.Open();
                Slider1.DataSource = cmd.ExecuteReader();
                Slider1.DataBind();
            }
        }
    }

    protected void BindSlider2(int Ubicacion)
    {
        using (SqlConnection con = Conexion.Conecta())
        {
            using (SqlCommand cmd = new SqlCommand("SelGacetaUbicacion", con))
            {
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Parameters.Add("@UBICACION", SqlDbType.Int).Value = Ubicacion;
                con.Open();
                Slider2.DataSource = cmd.ExecuteReader();
                Slider2.DataBind();
            }
        }
    }

Answer 1

我试过你的代码，发现了这个问题：

1- 查看如何根据您使用的 bootstrap 版本构建轮播标记。我尝试使用 Bootstrap v3.1.0 并且不得不更改部分标记。参考documentation or this sample.
例如，<div class="item"> 应该放在你的转发器里面，并且里面应该有一个 <div class="container">。

2- 你没有正确初始化来自 jquery 的两个轮播，做这样的事情来纠正它：

$("#Carousel div.item:first").addClass("active");
$("#Carousel2 div.item:first").addClass("active");

使用 asp:repeater 控件的多个 bootstrap 滑块

Multiple bootstrap sliders using asp:repeater control

c#

asp.net

repeater

slider

twitter-bootstrap