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.
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.
Figure1
we can manually select a content to see or have them rotated automatically.
Figure2