How do I add HTML image slider into a asp.net c# Website
I have created an Image Slider using html with Jquery. I am trying to put this image slider into a contentplaceholder on my homepage which is running off a masterpage template with c#. It is not working.
Image Slider HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Slider</title>
<style type="text/css">
.slider {
width:1025px;
height:500px;
overflow:hidden;
margin:30px auto;
}
.slider img{
width:1025px;
height:500px;
display:none;
margin:30px auto;
}
</style>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery- ui.min.js"></script>
<script type="text/javascript">
function Slider() {
$(".slider #1").fadeIn("fade, 500");
$(".slider #1").delay(5500).hide("slide", { direction: 'left' }, 500);
var sc = $(".slider img").size();
var count = 2;
setInterval(function (){
$(".slider #" + count).show("slide",{direction:'right'}, 500);
$(".slider #" + count).delay(5500).hide("slide", {direction:'left'}, 500);
if(count == sc){
count = 1;
}else{
count = count + 1;
}
}, 6500);
}
</script>
</head>
<body onload="Slider();">
<div class="slider">
<img id="1" src="Promotion1.png" border="0" alt="Promotion one" />
<img id="2" src="Promotion2.png" border="0" alt="Promotion two" />
</div>
</body>
</html>
Content Placeholder I am trying to put HTML into:
<asp:Content ID="Content3" runat="server" contentplaceholderid="ContentPlaceHolder1">
</asp:Content>
Answer
You must have a masterpage right that's why ur using a content page right ? You masterpage has already defined head / body and so on the HTML tags, so u need to just put the divs in the content place holder
<div class="slider" onload="Slider()";>
<img id="1" src="Promotion1.png" border="0" alt="Promotion one" />
<img id="2" src="Promotion2.png" border="0" alt="Promotion two" />
</div>
and your onload function call , you need to move your src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery- ui.min.js"> tag into the masterpage and put your jS in a JS file and reference it inside your masterpage ideally, you could put your JS code in the content page but this is not good practice, it just easier to create the js file and plonk in a reference in your masterpage...good luck !