ARTICLE

How to Create Featured Content Slider Using jQuery in ASP.NET

Posted by Rohatash Kumar Articles | ASP.NET using VB.NET June 22, 2011
Here, we makes a auto-playing content slider to show your featured content. users can Also manually select a content to see.
Download Files:
 
Reader Level:

Here, we makes a auto-playing content slider is the one of techniques to show your featured content. users can also manually select a content to see or have them rotated automatically.  Commercially-oriented sites need these capabilities so they can merchandise and monetize content, products, and services more effectively. when we surf the web, we'll  noticed that a very popular and very useful article that many websites use is a featured content.

The following are some easy steps.

Step-1:  Create a simple application in Visual Studio.

Step-2: Add the following JQuery and css file.

JQuery file

featured.js

Css file

Featured.css

These are included in the uploaded file.

Step-3

Now start work on the default .aspx page.

First, link these JQuery file and styles on the page in head section as follows:

WebForm1 .aspx:

<head runat="server">

   <title></title>

   <link rel="stylesheet" type="text/css" href="Styles/featured.css" />

<script type="text/javascript" src="Scripts/featured.js">

</script>

</head>

 

Step 4:  Now add the following code to the body section which contains five image on the page and use the style as follows:

<body>

   <form id="form1" runat="server">

   <div>

   <h2>This example shows featured content.</h2>

<div id="slider1" class="sliderwrapper">

<div class="contentdiv">

<strong>Featured Article</strong><br />

<p><img src="rohatashimage.jpg" style="width: 143px; height: 123px"/><a href="http://www.c-sharpcorner.com/UploadFile/rohatash/7763/">Simple User Login in ASP.NET using C#</a><p>In this article we will create a registration form, a login form and a form for checking for existing email.</p></p>

</div>

 

<div class="contentdiv">

<strong>Featured article</strong><br />

<p><img src="rohatashimage.jpg" style="width: 143px; height: 123px"/><a href="http://www.c-sharpcorner.com/UploadFile/rohatash/7826/">Retrieving User Password and Email Address from Database in ASP.NET using C#</a><p>Here, we will see how to retrieve user password and email address from database in ASP.NET.</p></p>

</div>

 

<div class="contentdiv">

<strong>Featured article</strong><br />

 

<p><img src="rohatashimage.jpg" style="width: 143px; height: 123px"/><a href="http://www.vbdotnetheaven.com/UploadFile/rohatash/7940/">User control in ASP.NET using VB.NET</a><p>In this article we will see how to create user control and how to use it in our web forms. </p></p>

</div>

</div>

 

<div id="paginate-slider1" class="pagination">

 

</div>

 

<script type="text/javascript">

 

    featuredcontentslider.init({

        id:"slider1"

        contentsource: ["inline", ""], 

        toc:"#increment"

        nextprev: ["Previous","Next"], 

        revealtype:"click",

        enablefade: [true, 0.2], 

        autorotate: [true, 3000], 

        onChange:function (previndex, curindex) { 

           

        }

    })

 

</script>

   </div>

   </form>

</body>

 

Step -5: Now run the application.


slide1.gif

 

Figure1

we can manually select a content to see or have them rotated automatically.

slide2.gif

Figure2

Note: You can see a demo of this article by downloading this application.

Login to add your contents and source code to this article
share this article :
post comment
 

Thanks

Posted by Rohatash Kumar Nov 18, 2011

Good article. thanks

Posted by Andrew Aug 16, 2011
Nevron Diagram
Become a Sponsor
PREMIUM SPONSORS
  • Finally – a virtual platform that delivers next-generation Windows Server 2008 Hyper-V virtualization technology from a managed hosting partner you can truly depend on. Visit www.maximumasp.com/max for a FREE 30 day trial. Hurry offer ends soon. Climb aboard the MaxV platform and take advantage of High Availability, Intelligent Monitoring, Recurrent Backups, and Scalability – with no hassle or hidden fees. As a managed hosting partner focused solely on Microsoft technologies since 2000, MaximumASP is uniquely qualified to provide the superior support that our business is built on. Unparalleled expertise with Microsoft technologies lead to working directly with Microsoft as first to offer IIS 7 and SQL 2008 betas in a hosted environment; partnering in the Go Live Program for Hyper-V; and product co-launches built on WS 2008 with Hyper-V technology.
    Get 2 Months Free of ASP.NET Hosting for Only $4.95/month! Receive FREE MS SQL and MySQL Databases Including ASP.NET 4/3.5, MVC 3.0, Silverlight 4, Windows 2008/IIS 7.0 Plus FREE IIS 7 Modules. Host UNLIMITED ASP.NET Web Sites - Click Here!
6 Months Free & No Setup Fees ASP.NET Hosting!
Become a Sponsor