2015-12-04 77 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