2015-12-04 110 views
2

我想创建使用ASP.Net直放站control.Here动态数据轮播是我希望它看起来像:转换引导轮播ASP.Net直放站

enter image description here

上面的图象是用静态数据完成的,我想将它转换为使用动态数据,到目前为止我在这里实现了。

enter image description here

下面是上述动态转盘的代码。

<div id="myCarousel" class="carousel slide container vertical" data-ride="carousel" data-interval="false"> 

      <ol class="carousel-indicators video-items"> 
       <asp:Repeater runat="server" ID="IndicatorRepeater"> 
        <ItemTemplate> 
         <li data-target="#myCarousel" data-slide-to="<%# (Container.ItemIndex)%>" class="<%# (Container.ItemIndex == 0 ? "active" : "") %>"></li> 
        </ItemTemplate> 
       </asp:Repeater> 
      </ol> 
      <div class="carousel-inner" role="listbox"> 
       <asp:Repeater runat="server" ID="ItemRepeater"> 
        <ItemTemplate> 
         <div class="item <%# (Container.ItemIndex == 0 ? "active" : "") %>"> 
          <div class="row"> 
           <div class="col-md-5 col-xs-3"> 
            <a href="#" class="players" title='<%# Eval("LinkDescription").ToString() %>'> 
              <img class="img-responsive" src="<%# Eval("ImgSrc").ToString() %>" alt="<%# Eval("Title").ToString() %>"> 
             </a> 
           </div> 
           <div class="col-md-7 page-text"> 
            <%# Eval("Title").ToString() %> 
            <br /> 
            <span>Season: 2015</span> 

           </div> 
          </div> 
         </div> 
         <div class="push"></div> 
        </ItemTemplate> 
       </asp:Repeater> 

      </div> 
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
       <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></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" aria-hidden="true"></span> 
       <span class="sr-only">Next</span> 
      </a> 

      <!-- /.carousel --> 

     </div> 

有人会知道我如何显示多个图像或所有图像?

回答

1

我终于用这样的ol元素包装了ASP.Net Repeater来解决了这个问题。

 <div class="carousel-inner">           
        <ol>       
          <asp:Repeater runat="server" ID="ItemRepeater"> 
           <ItemTemplate> 
            <div class="item <%# (Container.ItemIndex == 0 ? "active" : "") %>"> 
             <div class="row"> 
              <div class="col-md-5 col-xs-3"> 
               <img class="img-responsive" src="<%# Eval("ImgSrc").ToString() %>" alt="<%# Eval("Title").ToString() %>"> 
              </div> 
              <div class="col-md-7 page-text"> 
               <%# Eval("Title").ToString() %> 
               <br /> 
               <span>Season: 2015</span> 
              </div> 
             </div> 
             <div class="push"></div> 
            </div> 
           </ItemTemplate> 
          </asp:Repeater> 

        </ol>    
       </div> 

我仍然有数据幻灯片无法正常工作的问题,但至少滑块图像显示。

+0

使用* ASCX Control *与'2 repeaters'? – Kiquenet