CODEWITHSUNDEEP
c#asp.nettwitter-bootstrap
user3353053
user3353053

Reputation: 23

Bootstrap Carousel with Repeater shows all slides at once

The pictures all display at once and stack vertically. When I click NEXT or PREVIOUS in the carousel control, the carousel displays correctly. Am I missing something ?

<div id="myCarousel" class="carousel slide" data-ride="carousel">
 <div class="carousel-inner" role="listbox">


  <!-- Wrapper for slides --> 
    <asp:Repeater ID="images" runat="server">
  <AlternatingItemTemplate>        
    <div class="item active">
        <img src="<%#     Eval("file_path").ToString() %>"/>       
     </div>
  </AlternatingItemTemplate>

  <ItemTemplate>
   <div class="item">
    <img src="<%# Eval("file_path").ToString() %>"/>   
 </div>
</ItemTemplate>
  </asp:Repeater>



 <!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
 <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>

 </div>
  </div>

CODE BEHIND:

 protected void Page_Load(object sender, EventArgs e)
   {
    SomeDA da = new SomeDA();
    string name = Request.QueryString["id"];

    images.DataSource = da.getItems(name);
    images.DataBind();
  }

Any help is greatly appreciated.

Upvotes: 2

Views: 3859

Answers (1)

Lennart Stoop
Lennart Stoop

Reputation: 1689

Only the first item within the carousel should have the class "active". In your example all alternating items have this class which causes the carousel to stack them vertically.

<ItemTemplate>
  <div class="item <%# (Container.ItemIndex == 0 ? "active" : "") %>">
   <img src="<%# Eval("file_path").ToString() %>"/>
  </div>
</ItemTemplate>

Upvotes: 2

Related Questions