In this article we will explore how to build a Carousel control. To start with first we will build a 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 JQuery is.
Below are the steps to be followed to build a Carousel control
1. Open a new web site & start with default.aspx as mentioned below
2. Download the below JQuery java script files from http://jquery.com site
a. jquery-latest.pack.js
b. 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 an 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" ></li>
<li><img src=" sample-logo.png" alt="" width="100" height="100" ></li>
<li><img src=" sample-logo.png" alt="" width="100" height="100" ></li>
<li><img src=" sample-logo.png" alt="" width="100" height="100" ></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 work fine. Let's say we have image list which comes from DB source or any other source & you want to bind it to grid view or any list control. But when you use these control 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 to Repeater control instead of GridView, DataGrid and DataList
10. First lets add a 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>
</asp:Repeater>
</ul>
</div>
11. To bind this repeater with a source, we will generate a static list as following
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 & have a look at the output.
Hope this helps!