ASP Repeater in JQuery Carousel

Question

I am using ASP Repeater in JQuery Carousel same like in the link . I have Added all the references and links in my .aspx page and my code is:

    <

div class="head">
        <h1>Movies</h1> 
       </div>
       <div class="track example-5">
         <div class="inner">
           <h2>Record found: 23</h2>
            <div class="view-port">

            <asp:Repeater ID="Repeater1" runat="server"  >
                        <itemtemplate>                     
            <div id="example-5" class="slider-container">
                                <div class="item">
                                        <%# Eval("Link") %> <img   src="ShowVideoLogo.ashx?VideoID=<%# Eval("VideoID").ToString() %>"  width="200px" height="250px"   />                                       </div>                                                                        </div>
  </itemtemplate>  
 </asp:Repeater>    
 </div>
<div class="actions button-group">
 <a href="#" class="button primary icon reload">Restart</a>
           </div>
         </div>
         <div class="pagination">
          <a href="#" class="prev disabled"></a>
          <a href="#" class="next disabled"></a>
         </div>
       </div> 

I want to Use the Repeater in ITEM of this Carousel But it is showing nothing When I used image link in ITEM then it is working:

 <div class="track example-5">
 <div class="inner">
  <h2>Css3 Animation</h2>
  <div class="view-port">
    <div id="example-5" class="slider-container">
      <div class="item">
        <img src="http://ib1.huluim.com/video/60044632?size=220x124">
        <p>Trailer 1</p>
      </div>
      <div class="item">
        <img src="http://ib2.huluim.com/video/60063785?size=220x124">
        <p>Trailer 2</p>
      </div>
      <div class="item">
        <img src="http://ib2.huluim.com/video/60062745?size=220x124">
        <p>Trailer 3</p>
      </div>
      <div class="item">
        <img src="http://ib1.huluim.com/video/40050156?size=220x124">
        <p>Trailer 4</p>
      </div>
      <div class="item">
        <img src="http://ib1.huluim.com/video/60066740?size=220x124">
        <p>Trailer 5</p>
      </div>
      <div class="item">
        <img src="http://ib4.huluim.com/video/60062747?size=220x124">
        <p>Trailer 6</p>
      </div>
      <div class="item">
        <img src="http://ib3.huluim.com/video/60062746?size=220x124">
        <p>Trailer 7</p>
      </div>
      <div class="item">
        <img src="http://ib1.huluim.com/video/60062744?size=220x124">
        <p>Trailer 8</p>
      </div>
      <div class="item">
        <img src="http://ib2.huluim.com/video/60060717?size=220x124">
        <p>Trailer 9</p>
      </div>
    </div>
  </div>
  <div class="actions button-group">
    <a href="#" class="button primary icon reload">Restart</a>
  </div>
 </div>
 <div class="pagination">
  <a href="#" class="prev disabled"></a>
  <a href="#" class="next disabled"></a>
    </div>
   </div>

Answer 1

Try this, example-5 div needs to be outside of repeater as you cannot have multiple divs with same id. Also in above sample it only has one occurance of that div:

<div class="head">
    <h1>Movies</h1> 
</div>

<div class="track example-5">
    <div class="inner">
        <h2>Record found: 23</h2>
        <div class="view-port">
            <div id="example-5" class="slider-container">
                <asp:Repeater ID="Repeater1" runat="server"  >
                    <itemtemplate>                     
                        <div class="item">
                            <%# Eval("Link") %> 
                            <img   src="ShowVideoLogo.ashx?VideoID=<%# Eval("VideoID").ToString() %>"  width="200px" height="250px"   />                                     
                        </div>                                                                        
                    </itemtemplate>  
                </asp:Repeater>  
            </div>  
        </div>
        <div class="actions button-group">
            <a href="#" class="button primary icon reload">Restart</a>
        </div>
    </div>
    <div class="pagination">
        <a href="#" class="prev disabled"></a>
        <a href="#" class="next disabled"></a>
    </div>
</div>