Create Slider in ASP.NET using JQuery
We don’t have any slider control in Asp.Net, so we have to use some third party control or we have to use jQuery to create slider. In this article we discuss about how to create image slider in Asp.Net using jQuery and Listview. For that we are going to use some jquery framework jquery.lavalamp.min.js and jquery.tools.min.js.
Here we are using Listview to display the images. Adding image paths to DataTable and we are binding that DataTable to Listview.
using System;
using System.Data;
using System.Web.UI;
namespace AspNetSliderExp
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack == false)
{
DataTable dt = new DataTable();
dt.Columns.Add("imagePath", typeof(string));
dt.Rows.Add("microsoft_surface2.jpg");
dt.Rows.Add("ms_hero.jpg");
dt.Rows.Add("office.jpg");
dt.Rows.Add("windows8.jpg");
dt.Rows.Add("xbox-360-console.jpg");
lvSlider.DataSource = dt;
lvSlider.DataBind();
}
}
}
}
In .aspx page, we have to display the images in two div tags, first div tag needs to have “scrollable” css class and inner dive needs to have “items” css class as shown below.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="AspNetSliderExp.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>ASP.NET SLIDER</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/slider.css" />
<script type="text/javascript">
$(document).ready(function () {
$(".scrollable").scrollable();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<a class="prev browse left">
<img alt="Left" 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="lvSlider" 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='images/<%# Eval("imagePath") %>' />
</ItemTemplate>
</asp:ListView>
</div>
</div>
<a class="next browse right">
<img alt="Right" src="images/imgRight.jpg"/>
</a>
</div>
</form>
</body>
</html>
As shown above we set the Listview GroupItemCount attribute to 3 to display the three images for each slide. If you want to display the four images, set GroupItemCount value to 4. We can use Gridview or some other control instead of Listview.
The output is as shown below.
