如何在滑块上显示4张照片？

Question

我想显示在所有各滑块4的照片，但我只能得到1张照片

有什么不同的方式来显示并排4张侧滑块？

<div class='slider'> 
         <ul class='slides'> 
           <asp:Repeater ID="rpShowcaseAlbum" runat="server"> 
            <ItemTemplate> 
           <li> 
           <!-- Showcase Album --> 
           <div class='span12'> 
             <a href="album_detay.aspx?ArtistID=<%#Eval("ArtistID") %>"> 
              <div class="photo_frame"> 
               <img src='Admin/uploads/photo/<%#Eval("Photo") %>' style="max-width: 250px; max-height: 250px;" alt='' /> 
               <div class='text'> 
                <span class='artist'><%#Eval("ArtistName") %></span> 
               </div> 
              </div> 
             </a> 
           </div> 
          </li> 
          </ItemTemplate> 
          </asp:Repeater> 
         </ul> 
        </div> 


    if (Dt.Rows.Count > 0) 
     { 
      rpShowcaseAlbum.DataSource = Dt; 
      rpShowcaseAlbum.DataBind(); 
     } 

Answer 1

你的问题是，你正在创建包裹里和DIV在滑块的每个项目。您可以使用项目索引使这些Li和DIV仅在需要时：

<%# Container.ItemIndex % 4 == 0 ? "<li><div class='span12'>" : "" %> 

    <a href="album_detay.aspx?ArtistID=<%#Eval("ArtistID") %>"> 
     <div class="photo_frame"> 
      <img src='Admin/uploads/photo/<%#Eval("Photo") %>' style="max-width: 250px; max-height: 250px;" alt='' /> 
      <div class='text'> 
       <span class='artist'><%#Eval("ArtistName") %></span> 
      </div> 
     </div> 
    </a> 

<%# Container.ItemIndex % 4 == 3 ? "</div></li>" : "" %> 

这是一个有点trick的，并且因为一个事实，即集装箱实际上是在数据绑定唯一可用的背景下完成的。