jquery Slider Not working after Inserting the datalist code...

Question

0.00/5 (No votes)

See more:

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 20-Apr-14 9:44am

joginder-banger

Updated 20-Apr-14 13:03pm

karthik Udhayakumar

v2

Add a Solution

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

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 20-Apr-14 22:06pm

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.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 21-Apr-14 2:11am

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.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 21-Apr-14 3:13am

Do one thing. Just analyze the source codes of your website and the example demo page. You can see that there are many differences for that slider.

joginder-banger 24-Apr-14 20:57pm

what is the difference both of between i can't understand what is the procedure way of set code in data list.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2014-04-25T19:30:00

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>