JQuery Image Slider by using ASP.NET Listview, ArrayList
By using Asp.Net Listview, jQuery scrollable function we can easily create the image slider. Listview has the GroupTemplate to group the required items.
As shown below we are binding the ArrayList which has the list of images to the Listview.
ArrayList arrList = new ArrayList();
arrList.Add("images/image1.jpg");
arrList.Add("images/image2.jpg");
arrList.Add("images/image3.jpg");
arrList.Add("images/image4.jpg");
arrList.Add("images/image5.jpg");
arrList.Add("images/image6.jpg");
arrList.Add("images/image7.jpg");
arrList.Add("images/image8.jpg");
arrList.Add("images/image9.jpg");
arrList.Add("images/image10.jpg");
lvProducts.DataSource = arrList;
lvProducts.DataBind();
In aspx page, we have the below code which displays all images as scrollable.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/scrollable-buttons.css" />
<script type="text/javascript" >
// execute your scripts when the DOM is ready. this is mostly a good habit
$(document).ready(function () {
// initialize scrollable
$(".scrollable").scrollable();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<a class="prev browse left">
<img src="images/imgLeft.jpg" />
</a>
<div class="scrollable" style="height:100px;margin:20px;border:solid 1px #CCC;padding:50px;">
<div class="items">
<asp:ListView ID="lvProducts" runat="server" GroupItemCount="3">
<LayoutTemplate>
<asp:PlaceHolder ID="groupPlaceholder" runat="server" />
</LayoutTemplate>
<GroupTemplate>
<div>
<asp:PlaceHolder ID="itemPlaceholder" runat="server" />
</div>
</GroupTemplate>
<ItemTemplate>
<img border="0" style="border:none;" src="<%# Container.DataItem%>" />
</ItemTemplate>
</asp:ListView>
</div>
</div>
<a class="next browse right">
<img src="images/imgRight.png" />
</a>
</div>
</form>
</body>
</html>
As show above at once we are displaying the three images by using GroupItemCount property of asp.net Listview. Listview hasGroupTemplate which groups the mentioned items for GroupItemCount property.
By using the Container.DataItem property we are displaying the arraylist items in Listview. The output of the image slider by using Asp.Net Listview and jQuery is shown as below.
