Create Slideshow Using Easy Slider JQuery Plugin

Gohil Jayendrasinh
13y
12.5k
0
0

Article

Here, you will see how to create a slideshow using an easy slider jQuery plug-in. First of all start Visual Studio .NET and make a new ASP.NET web site using Visual Studio 2010.

Step1: Your .aspx page looks like this:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" %>

<!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 runat="server">
<title>Easy Slider jQuery Plugin Demo - ASP.NET</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/easySlider1.5.js" type="text/javascript"></script>
<link href="css/screen.css" rel="stylesheet" type="text/css" />
</head>
<body>

<form id="form1" runat="server">
<div id="content" runat="server">
</div>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#slider").easySlider({
auto: true,
continuous: false
});
});
</script>
<style>
#slider
{

}
#slider ul, #slider li
{
margin: 0;
padding: 0;
list-style: none;
}

#slider li

{
width: 696px;
height: 241px;
overflow: hidden;

}

#prevBtn, #nextBtn

{

display: block;

width: 30px;

height: 77px;

position: absolute;

left: -30px;

top: 71px;

}

#nextBtn

        {
          left: 696px;
           }

#prevBtn a, #nextBtn a

{
display: block;

           width: 30px;
           height: 77px;
           background: url(images/btn_prev.gif) no-repeat 0 0;

}

#nextBtn a

       {
          background: url(images/btn_next.gif) no-repeat 0 0;
        }

</style>
</form>

</body>
</html>

Step2: Your .cs page looks like:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.IO;

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

CreateSlider();

}

private void CreateSlider()
{

StringWriter stringWriter = new StringWriter();
using (HtmlTextWriter writer = new HtmlTextWriter(stringWriter))

{

writer.AddAttribute(HtmlTextWriterAttribute.Id, "slider");

writer.RenderBeginTag(HtmlTextWriterTag.Div);
writer.RenderBeginTag(HtmlTextWriterTag.Ul);

for (int i = 1; i <= 7; i++)

{

               writer.RenderBeginTag(HtmlTextWriterTag.Li);
               writer.AddAttribute(HtmlTextWriterAttribute.Href, "#");
               writer.RenderBeginTag(HtmlTextWriterTag.A):
               string src = "images/"+i.ToString()+".jpg";
               writer.AddAttribute(HtmlTextWriterAttribute.Src,src);
               writer.RenderBeginTag(HtmlTextWriterTag.Img);
               writer.RenderEndTag();

               writer.RenderEndTag();
               writer.RenderEndTag();
               writer.RenderEndTag();
               writer.RenderEndTag();
}
        content.InnerHtml = stringWriter.ToString();

}