Reader Level:
ARTICLE

Create Slideshow Using Easy Slider JQuery Plugin

Posted by Gohil Jayendrasinh Articles | JQuery March 17, 2012
Here, you will see how to create a slideshow using an easy slider jQuery plugin.
  • 0
  • 0
  • 8828
Download Files:
 

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;
l
ist-stylenone;
}
 

#slider li

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

        }

        #prevBtn#nextBtn

        {

            displayblock;

            width30px;

            height77px;

            positionabsolute;

            left-30px;

            top71px;

        }

        #nextBtn

        {
          left
696px;
           }

        #prevBtn a#nextBtn a

        {
           display
block;

           width30px;
           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();

    }

}

img2.gif

img3.gif



 

 

           


         

  

COMMENT USING

Trending up