Click here to Skip to main content
15,843,200 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi friends I hope every thing is cool.I am facing a new problem at this time working on entertainment project. This project name is Findadda. In this website have a many pages like that index page and internal page. I have no idea how to create a slider, I pickup thrid party tool. this tool working fine with html code but when i replace html code to Datalist. Jquery slinder not working. plz look my where am Wrong.

HTML code
<ul id="carousel" class="elastislide-list">
					<li><a href="#"><img src="images/small/1.jpg" alt="image01" /></a></li>
					<li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li>
					<li><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li>
					<li><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li>
					<li><a href="#"><img src="images/small/5.jpg" alt="image05" /></a></li>
					<li><a href="#"><img src="images/small/6.jpg" alt="image06" /></a></li>
					<li><a href="#"><img src="images/small/7.jpg" alt="image07" /></a></li>
					<li><a href="#"><img src="images/small/8.jpg" alt="image08" /></a></li>
					<li><a href="#"><img src="images/small/9.jpg" alt="image09" /></a></li>
					<li><a href="#"><img src="images/small/10.jpg" alt="image10" /></a></li>
					<li><a href="#"><img src="images/small/11.jpg" alt="image11" /></a></li>
					<li><a href="#"><img src="images/small/12.jpg" alt="image12" /></a></li>
					<li><a href="#"><img src="images/small/13.jpg" alt="image13" /></a></li>
					<li><a href="#"><img src="images/small/14.jpg" alt="image14" /></a></li>
					<li><a href="#"><img src="images/small/15.jpg" alt="image15" /></a></li>
					<li><a href="#"><img src="images/small/16.jpg" alt="image16" /></a></li>
					<li><a href="#"><img src="images/small/17.jpg" alt="image17" /></a></li>
					<li><a href="#"><img src="images/small/18.jpg" alt="image18" /></a></li>
					<li><a href="#"><img src="images/small/19.jpg" alt="image19" /></a></li>
					<li><a href="#"><img src="images/small/20.jpg" alt="image20" /></a></li>
				</ul>
				<!-- End Elastislide Carousel -->

				<p>Resize the browser to see how the carousel adapts</p>

				<p class="info">Example 1: A minimum of 3 (default) images are always visible.</p>
			</div>
		</div>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquerypp.custom.js"></script>
		<script type="text/javascript" src="js/jquery.elastislide.js"></script>
		<script type="text/javascript">
			
			$( '#carousel' ).elastislide();
			
		</script> lang="HTML"></ul>


and my asp.control with datalist

HTML
<pre lang="HTML">

HTML

XML
<asp:DataList ID="mylist" runat="server">
              <ItemTemplate>
              <ul id="carousel" class="elastislide-list">
                  <li><a href="#">
                      <asp:Image ID="Image1" runat="server" ImageUrl='~/images/small/<%#eval("image")%>'/>

                  </a>
                  </li>

              </ul>

              </ItemTemplate>
              </asp:DataList

>
Posted
Updated 20-Apr-14 14:03pm
v2
Comments
joginder-banger 20-Apr-14 15:54pm    
for more information check out this link http://singhitsolutions.com/ top slider is bind with the help of datalist but can't working proper...plz help me out
Which slider you are using? Can you give the official page/link of that slider?
joginder-banger 21-Apr-14 1:15am    
http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/
sir this slider used in my code.
If you check the demo page, you can see 4 examples.

Tell me which example you have followed.
joginder-banger 21-Apr-14 3:10am    
sir first example.

1 solution

Problem


Okay, I did some research and find out that when you use DataList, it generates a table at the client side HTML. Due to which carousel is not working. One more problem was in the ImageUrl, which should be like ImageUrl='<%# "images/small/" + Eval("image")%>'.

Solution


If you use Repeater instead of DataList, it solves the issue and carousel works perfectly. I have tried this at my end.

So, the Repeater would look like...
XML
<asp:Repeater ID="mylist" runat="server">
    <HeaderTemplate>
        <ul id="carousel" class="elastislide-list">
    </HeaderTemplate>
    <ItemTemplate>
        <li><a href="#">
            <asp:Image ID="Image1" runat="server" ImageUrl='<%# "images/small/" + Eval("image")%>' />
        </a></li>
    </ItemTemplate>
    <FooterTemplate>
        </ul></FooterTemplate>
</asp:Repeater>
 
Share this answer
 
v2
Comments
joginder-banger 26-Apr-14 1:56am    
thanks sir...and my vote is 5++
Most welcome bro. :)
joginder-banger 26-Apr-14 3:29am    
sir it's working...
Glad to hear that. Good work. :)
joginder-banger 16-Jun-14 10:27am    
what' going on sir g

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900