Click here to Skip to main content
Click here to Skip to main content

Tagged as

Go to top

JQuery Carousel Control in ASP.NET

, 10 Nov 2011
Rate this:
Please Sign up or sign in to vote.
In this article, we will explore how to build Carousel control. To start with, first we will build Static HTML carousel control & then we will integrate it with our .NET Repeater control to show data & work similar to Static HTML content.
It is expected you have basic knowledge on what is JQuery.
 
Below are the steps to be followed to build Carousel control:
  1. Open new web site & start scratching default.aspx as mentioned below
  2. Download below JQuery JavaScript files from http://jquery.com site

    1. jquery-latest.pack.js
    2. jcarousellite_1.0.1.js
  3. Add above JS script reference in default.aspx under head tags as shown below:
    	<script type="text/javascript" src=" jquery-latest.pack.js"></script>
    	<script type="text/javascript" src=" jcarousellite_1.0.1.js"></script>
     
  4. Now we will add a div, which will contain Unordered list tag & image tags. This div should be assigned with some class name. In our instance, we are using class name as “anyClass” & image should be assigned with proper image source path:
    <div class="anyClass">
        <ul>
            <li><img src=" sample-logo.png" alt="" width="100" height="100"></img></li>
            <li><img src=" sample-logo.png" alt="" width="100" height="100"></img></li>
            <li><img src=" sample-logo.png" alt="" width="100" height="100"></img></li>
            <li><img src=" sample-logo.png" alt="" width="100" height="100"></img></li>
        </ul>
    </div>
    
     
  5. Now for navigation of images, we need 2 buttons for forward & backward navigation.
    <button class="prev"><<</button>
    <button class="next">>></button>
    
     
  6. In the head section, add JS script tag & add the following code.
    <script type="text/javascript">
    		$(function() {
    		$(".anyClass").jCarouselLite({
    			btnNext: ".next",
    			btnPrev: ".prev"
    		});
    	});
     
    </script>
     
    /* Comment : div class name & following and name in this line of code should match $(".anyClass").jCarouselLite( */
     
  7. Now run the page & see the output.
     
  8. So far so good, till now we have seen static HTML works fine. Let’s say we have image list which comes from DB source or any other source & you want to bind it to gridview or any list control. But when you use these controls, you would not be able to add UnOrdered list ul and the HTML as same as above static. If you have similar HTML, JQuery carousel will not work properly. I mean you need to have div, followed by ol then followed by li & finally img tag.
     
  9. So to get out of this & generate similar stuff, we need Repeater control instead of GridView, DataGrid and DataList.
     
  10. First let's add Repeater control to webpage, inside our DIV & css class should be “anyClass”:
    <div class="anyClass">
                <ul>
                    <asp:Repeater ID="myRepeater" runat="server">
                        <itemtemplate>
                            <li>
                                <table>
                                    <tr>
                                        <td><img src="<%# DataBinder.Eval(Container.DataItem, " imageurl=")%>" alt="" width="100" height="100" />
                                        </td>
                                         
                                    </tr>
                                    
                                </table>                             
                            </li>
                        </itemtemplate>                
                </ul>
            </div>
    
     

  11. To bind this repeater with source, we will generate static list as follows:
    var list = (new[] { new { ImageURL = "images/sample-logo.png", Text = "The Sun" } }).ToList();
            list.Add(new { ImageURL = "images/sample-logo.png", Text = "New York" });
            list.Add(new { ImageURL = "images/sample-logo.png", Text = "Office Meeting" });
            list.Add(new { ImageURL = "images/sample-logo.png", Text = "A Beach" });
            list.Add(new { ImageURL = "images/sample-logo.png", Text = "Global Technology" });
            list.Add(new { ImageURL = "images/sample-logo.png", Text = "My Global Technology" });
            list.Add(new { ImageURL = "images/sample-logo.png", Text = "Our Global Technology" });
     

    Hope the above code is simple enough to understand, if yes, then let’s move on.

     

  12. Finally, add this list to our repeater control:
    myRepeater.DataSource = list;
    myRepeater.DataBind();
     

  13. Now run the application and have a look at the output.
     
Happy coding… hope this helps!

License

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

Share

About the Author

Bangla Gopal Surya Prakash
Software Developer (Senior)
United States United States
B.Tech graduate in CSE, having experience in .Net related Technologies
 
Microsoft Certified Technical Specialist in .NET Framework 2.0
Microsoft Certified Technical Specialist in .NET Framework 4.0
 
My interests are Coding, reading [technical stuff] and listening to music, playing Cricket, Table Tennis
 
http://bgsuryablog.blogspot.com/

Comments and Discussions

 
Generalcan you post de sourcecode of the proyect please? i release ... Pinmembermpulla30-Jan-12 8:53 
Generalnot working.. Pinmemberswatisrivastava18-Jan-12 3:07 
Generalmmm I do everything I say and pass on the data of the repeat... PinmemberJheiron15-Nov-11 3:02 
GeneralReason for my vote of 5 Simple and proper example. PinmemberSkumar123213-Nov-11 20:25 
QuestionDemo / Screenshot? PinmemberZenRaven24-Jan-12 6:37 
AnswerRe: Demo / Screenshot? Pinmemberpaulsoren24-Jan-12 8:45 
AnswerRe: Demo / Screenshot? Pinmembereberetta30-May-12 4:33 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140922.1 | Last Updated 10 Nov 2011
Article Copyright 2011 by Bangla Gopal Surya Prakash
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid