title: Multiple bootstrap sliders using asp:repeater control
body: <p>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</p>
  
  <p>Here is the html and asp code
      <hr/></p>
  
  <pre><code>    &lt;div class="col-md-12"&gt;
          &lt;div id="Carousel" class="carousel slide"&gt;
              &lt;!-- Carousel items --&gt;
              &lt;div class="carousel-inner"&gt;
                  &lt;div class="item"&gt;
                      &lt;div class="row"&gt;
                          &lt;asp:Repeater runat="server" ID="Slider1"&gt;
                              &lt;ItemTemplate&gt;
                                  &lt;div class="col-md-2"&gt;
                                      &lt;div class="row"&gt;
                                          &lt;a target="_blank" href="&lt;%# Eval("URL") %&gt;"&gt;
                                              &lt;img class="caption" src="../Includes/gaceta/&lt;%# Eval("Titulo") %&gt;/files/res/pages/page_0000.jpg" alt="&lt;%# Eval("Titulo") %&gt;" width="188" height="222" /&gt;&lt;/a&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/ItemTemplate&gt;
                          &lt;/asp:Repeater&gt;
                      &lt;/div&gt;
                      &lt;!--.row--&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!--.carousel-inner--&gt;
              &lt;a data-slide="prev" href="#Carousel" class="left carousel-control"&gt;‹&lt;/a&gt;
              &lt;a data-slide="next" href="#Carousel" class="right carousel-control"&gt;›&lt;/a&gt;
          &lt;/div&gt;
          &lt;!--.Carousel--&gt;
      &lt;/div&gt;
  
  
      &lt;hr /&gt;
      &lt;div class="col-md-12"&gt;
          &lt;div id="Carousel2" class="carousel slide"&gt;
              &lt;!-- Carousel items --&gt;
              &lt;div class="carousel-inner"&gt;
                  &lt;div class="item"&gt;
                      &lt;div class="row"&gt;
                         &lt;asp:Repeater runat="server" ID="Slider2"&gt;
                              &lt;ItemTemplate&gt;
                                  &lt;div class="col-md-2"&gt;
                                      &lt;div class="row"&gt;
                                          &lt;a target="_blank" href="&lt;%# Eval("URL") %&gt;"&gt;
                                              &lt;img class="caption" src="../Includes/gaceta/&lt;%# Eval("Titulo") %&gt;/files/res/pages/page_0000.jpg" alt="&lt;%# Eval("Titulo") %&gt;" width="188" height="222" /&gt;&lt;/a&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/ItemTemplate&gt;
                          &lt;/asp:Repeater&gt;
                      &lt;/div&gt;
                      &lt;!--.row--&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!--.carousel-inner--&gt;
              &lt;a data-slide="prev" href="#Folletos" class="left carousel-control"&gt;‹&lt;/a&gt;
              &lt;a data-slide="next" href="#Folletos" class="right carousel-control"&gt;›&lt;/a&gt;
          &lt;/div&gt;
          &lt;!--.Carousel--&gt;
  </code></pre>
  
  <p>the javascript</p>
  
  <pre><code>      $(document).ready(function () {
      $('#Carousel').carousel('pause');
      $('#Carousel2').carousel('pause');
  
      $("div.item:first").addClass("active");
  });
  </code></pre>
  
  <p>and the methods to bind the repeater</p>
  
  <pre><code> 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();
              }
          }
      }
  </code></pre>