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

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"/><ahref="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

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.