Question

图片全部一次显示并垂直堆叠。当我在轮播控件中单击NEXT或PREVIOUS时，轮播正确显示。我错过了什么吗？

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

背后的代码：

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

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

非常感谢任何帮助。

Answer 1

只有旋转木马中的第一个项目应该具有＆＃34;活动＆＃34;。在您的示例中，所有交替项都有此类，这会导致轮播垂直堆叠。

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

带中继器的Bootstrap Carousel一次显示所有幻灯片

1 个答案: