CODEWITHSUNDEEP
c#asp.netcontentplaceholder
Martin Hall
Martin Hall

Reputation: 81

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>

Upvotes: 1

Views: 19665

Answers (3)

Paul L
Paul L

Reputation: 2260

First thing first, your CDN is wrong. it should be:

<script type="text/javascript"
 src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

notice you missed the https part. Then HTML for that single page should work by itself.

Then follow other suggestions using proper master and content tag, or comes back for more questiond :D

Upvotes: 1

Juan
Juan

Reputation: 1382

In a master page add the links to jquery, then add a content placeholder for the head.

Add a new page using the master page recently created. Add the function slider in that content placeholder. Remove the onload from the body and in the page use .load() using jquery to add the call.

Add a second place holder in the master to add content in the body and add your html for the slider.

Hope it helps.

Upvotes: 0

fuzzybear
fuzzybear

Reputation: 2405

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 !

Upvotes: 1

Related Questions