In ASP.NET Create Featured Content Slider Using jQuery

Here, we makes a auto-playing content slider to show your featured content. users can Also manually select a content to see.
  • 5528

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


Css file


These are included in the uploaded file.


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">


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

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




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


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


   <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="">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 class="contentdiv">

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

<p><img src="rohatashimage.jpg" style="width: 143px; height: 123px"/><a href="">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 class="contentdiv">

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


<p><img src="rohatashimage.jpg" style="width: 143px; height: 123px"/><ahref="">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 id="paginate-slider1" class="pagination">




<script type="text/javascript">




        contentsource: ["inline"""], 


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


        enablefade: [true, 0.2], 

        autorotate: [true, 3000], 

        onChange:function (previndex, curindex) { 










Step -5: Now run the application. 





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




More Articles

© 2020 DotNetHeaven. All rights reserved.