title: Bootstrap carousel with asp repeater dynamically in SharePoint 2013
body: <p>So I have the code for my Bootstrap carousel that gets the images from my library in Visual Studio. Now I want this carousel to work dynamically by getting the images from a document library in SharePoint 2013 instead of from Visual Studio.</p>
  
  <p>Standard code in Carousel.ascx</p>
  
  <pre><code> &lt;div class="carousel slide" id="myCarousel" data-ride="carousel"&gt;
   &lt;!-- Indicators --&gt;
    &lt;ol class="carousel-indicators" style="top:85%"&gt;
      &lt;li class="active"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
    &lt;/ol&gt;
  
    &lt;div class="carousel-inner"&gt;
       &lt;div class="item active" style="height:200px;"&gt;
          &lt;a href="&lt;% $SPUrl:~sitecollection/subsite/ %&gt;" runat="server"&gt;&lt;img src="../../_layouts/15/Project1/Images/carousel1.png"&gt;&lt;/a&gt;
       &lt;/div&gt;
       &lt;div class="item" style="height:200px;"&gt;
          &lt;a href="&lt;% $SPUrl:~sitecollection/subsite/ %&gt;" runat="server"&gt;&lt;img src="../../_layouts/15/Project1/Images/carousel2.png"&gt;&lt;/a&gt;
       &lt;/div&gt;
       &lt;div class="item " style="height:200px;"&gt;
          &lt;a href="&lt;% $SPUrl:~sitecollection/subsite/ %&gt;" runat="server"&gt;&lt;img src="../../_layouts/15/Project1/Images/carousel3.png"&gt;&lt;/a&gt;
       &lt;/div&gt;
       &lt;div class="item " style="height:200px;"&gt;
          &lt;a href="&lt;% $SPUrl:~sitecollection/subsite/ %&gt;" runat="server"&gt;&lt;img src="../../_layouts/15/Project1/Images/carousel4.png"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>(Two ending div tags missing at the end) And this works perfectly. But now I'm trying with two repeaters (one for indicators and one for carousel inner)</p>
  
  <p>New code in Carousel.ascx</p>
  
  <pre><code>&lt;div class="carousel slide" id="myCarousel" data-ride="carousel"&gt;
  
  &lt;!-- Indicators --&gt;
  &lt;ol class="carousel-indicators" style="top:85%"&gt;
      &lt;asp:Repeater ID="indicatorRepeater" runat="server"&gt;
          &lt;ItemTemplate&gt;
              &lt;li class="&lt;%# IndicatorClass(Container.ItemIndex)%&gt;"&gt;&lt;/li&gt;
          &lt;/ItemTemplate&gt;
      &lt;/asp:Repeater&gt;
  &lt;/ol&gt;
  
  &lt;div class="carousel-inner"&gt;
      &lt;asp:Repeater ID="carouselRepeater" runat="server"&gt;
          &lt;ItemTemplate&gt;
      &lt;div class="&lt;%# CarouselClass(Container.ItemIndex)%&gt;" style="height:200px;"&gt;
          &lt;a href="&lt;% $SPUrl:~sitecollection/subsite %&gt;" runat="server"&gt;&lt;img src="http://sp2013/Carousel/&lt;%#Eval("LinkFilenameNoMenu")%&gt;"&gt;&lt;/a&gt;
      &lt;/div&gt;
          &lt;/ItemTemplate&gt;
      &lt;/asp:Repeater&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  (Last ending div tag missing)
  Code behind, Carousel.ascx.cs</p>
  
  <pre><code>public partial class Carousel : UserControl
  {
      protected void Page_Load(object sender, EventArgs e)
      {
          SPWeb web = SPContext.Current.Site.RootWeb;
  
          SPList list = web.Lists.TryGetList("Carousel");
  
          if (list != null)
          {
              SPListItemCollection collection = list.GetItems();
  
              if (collection.Count &gt; 0)
              {
                  DataTable table = collection.GetDataTable();
                  carouselRepeater.DataSource = table;
                  carouselRepeater.DataBind();
                  indicatorRepeater.DataSource = table;
                  indicatorRepeater.DataBind();
              }
          }
  
          carouselRepeater.ItemDataBound += carouselRepeater_ItemDataBound;
          indicatorRepeater.ItemDataBound += indicatorRepeater_ItemDataBound;
      }
  
      void carouselRepeater_ItemDataBound(object sender, RepeaterItemEventArgs e)
      {
          string s = "";
      }
  
      void indicatorRepeater_ItemDataBound(object sender, RepeaterItemEventArgs e)
      {
          string s = "";
      }
  
      public string CarouselClass(int itemIndex)
      {
          if (itemIndex == 0)
          {
              return "item-active";
          }
          else
          {
              return "item";
          }
      }
  
      public string IndicatorClass(int itemIndex)
      {
          if (itemIndex == 0)
          {
              return "active";
          }
          else
          {
              return "";
          }
      }
  }
  </code></pre>
  
  <p>The problem is when the carousel Changes to slide 2. The first one works perfect and the div have the class "item-active" while the indicator have the class "active". But in the next slide, I get the image, but then it is stuck. And the indicator does not get the active class. I've searched for this in different sites, and found this one <a href="http://devnet.kentico.com/forums/f65/fp21/t40584/bootstrap-carousel" rel="nofollow">http://devnet.kentico.com/forums/f65/fp21/t40584/bootstrap-carousel</a> which is the only one I could find, but I don't know if it really helps me.</p>
  
  <p>Thanks in advance!</p>