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>
				<!-- 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>
		<script type="text/javascript" src=""></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

<pre lang="HTML">


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




Updated 20-Apr-14 14:03pm
joginder-banger 20-Apr-14 15:54pm    
for more information check out this link 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
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


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")%>'.


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...
<asp:Repeater ID="mylist" runat="server">
        <ul id="carousel" class="elastislide-list">
        <li><a href="#">
            <asp:Image ID="Image1" runat="server" ImageUrl='<%# "images/small/" + Eval("image")%>' />
Share this answer
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