Multiple bootstrap sliders using asp:repeater control

Question

I have to use multiple bootstrap carousel in single page, using the asp repeater control but it doesn't work, it just show one slider on the page

Here is the html and asp code

---

    <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-->

the javascript

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

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

and the methods to bind the repeater

 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

I tried your code, and found this issues:

1- Review how to build the carousel markup depending on which version of bootstrap you are using. I tried with Bootstrap v3.1.0 and had to change parts of your markup. Refer to documentation or this sample.
For instance, <div class="item"> should be placed inside your repeater, and should have a <div class="container"> immediatly inside of it.

2- You are not initializing correctly both carousels from jquery, do something like this to correct it:

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