Introduction:
This is the question asked by many people to me . How to create Image slider in ASP.Net.so i am explaning here the most small and easy way to do .Here
the answer in some steps to create Image Slider in ASP.net using javascript and
CSS:
Do before start :
- Download the whole demo here.
- Start a new project in asp.net -> add a page.
- Write below source code there:
Code :
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/templatemo_style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />
<script language="javascript" type="text/javascript">
function clearText(field) {
if (field.defaultValue == field.value) field.value = '';
else if (field.value == '') field.value = field.defaultValue;
}
</script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/ddsmoothmenu.js">
</script>
<script type="text/javascript">
ddsmoothmenu.init({
mainmenuid: "templatemo_menu", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or
"v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme:
["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id",
"path_to_menu_file"]
})
</script>
<script type="text/javascript" src="js/jquery-1-4-2.min.js"></script>
<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />
<script type="text/JavaScript" src="js/slimbox2.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="templatemo_slider">
<div id="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="images/slider/01.jpg" alt="Slider 01" title="First Image" />
<a href="#"><img src="images/slider/02.jpg" alt="Slider 02" title="Second Image. " /></a>
<img src="images/slider/03.jpg" alt="Slider 03" title="Third Image." />
<img src="images/slider/04.jpg" alt="Slider 04" title="Fourth Image" />
<img src="images/slider/05.jpg" alt="Slider 05" title="Fifth Image." />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>Image</em> Slider using <a href="#">Javascript</a>.
</div>
</div>
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function () {
$('#slider').nivoSlider();
});
</script>
</div>
</div>
</form>
</body>
</html>
Importnat Points :
- Link css or script properly using link href or Link rel tag of html .
- Write scripts properly.
- Make sure the id of div is available in linked CSSs.
History :
to view demo click here
Hello everybody,
ReplyDeleteThis is a very very precise way to use
image-slider in your asp.net web application.
Thx Prakash to put your nice words here .
DeleteHi Neha im try to ask for the question .i dont have any way ask u..so pls help me..
DeleteGreat Post.Very helpful.
ReplyDeleteSimple and smart coding and better viewing.
Thanks, great article.
ReplyDeleteThanks a lottt That ur Code Is Runing
ReplyDeleteTHank YoU Very Much Neha
ReplyDeleteHi Neha I want the responsive image slider ..pls help me..
ReplyDeleteim using sql database..
Nice article.
ReplyDeleteWhile searching for responsive image slider with database in asp .net I found this article:
http://www.codingfusion.com/Post/Dynamic-Nivo-Responsive-Image-slider-with-database