Microsoft Visual Studio Express for Web 2013 Image Slider

Murray Brown
Murray Brown used Ask the Experts™
on
Hi. The following markup is a new home page in my Visual Studio 2013 Web Express project. Further down is JavaScript that I used in a 2010 project to create a slider effect. I tried to use this code in my 2013 project but it didn't work. Is there a reason why it might not work?
Where would I place it in the first piece of markup to make it work? If it doesn't work is there an alternative?

@ Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.vb" Inherits="AirData._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

    <div class="jumbotron">
        <h1>ASP.NET</h1>
        <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
        <p><a href="http://www.asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
    </div>

    <div class="row">
        <div class="col-md-4">
            <h2>Getting Started</h2>
            <p>
                ASP.NET Web Forms lets you build dynamic websites using a familiar drag-and-drop, event-driven model.
            A design surface and hundreds of controls and components let you rapidly build sophisticated, powerful UI-driven sites with data access.
            </p>
            <p>
                <a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301948">Learn more &raquo;</a>
            </p>
        </div>
        <div class="col-md-4">
            <h2>Get more libraries</h2>
            <p>
                NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.
            </p>
            <p>
                <a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301949">Learn more &raquo;</a>
            </p>
        </div>
        <div class="col-md-4">
            <h2>Web Hosting</h2>
            <p>
                You can easily find a web hosting company that offers the right mix of features and price for your applications.
            </p>
            <p>
                <a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301950">Learn more &raquo;</a>
            </p>
        </div>
    </div>

</asp:Content>

Open in new window


- I used the following code to create a slider effect on the site www.leadershipsurvey.co.za


        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.slider img:gt(0)').hide();
            setInterval(function () { $('.slider :first-child').fadeOut(2000).next('img').fadeIn(2000).end().appendTo('.slider'); }, 5000); /*5 sec*/
        });
    </script>
    <style type="text/css">
	.slider { clear:both; position:relative; height:240px; width:950px; }
	.slider img { position:absolute; left:0; top:0;cursor:pointer; }
    </style>


    <div class="slider" style="margin:0 auto;">
        <img src="Images_Slide2/1.jpg" />
        <img src="Images_Slide2/2.jpg" />
        <img src="Images_Slide2/3.jpg" />
        <img src="Images_Slide2/4.jpg" />
        <img src="Images_Slide2/5.jpg" />
        <img src="Images_Slide2/6.jpg" />
        <img src="Images_Slide2/7.jpg" />
        <img src="Images_Slide2/8.jpg" />
        <img src="Images_Slide2/9.jpg" />
        <img src="Images_Slide2/10.jpg" />
    </div>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2012
Top Expert 2008

Commented:
When you say it didn't work, why didn't it work?  Did you get an error, or is it not working as expected?
Top Expert 2016
Commented:
works for one div don't you need 3 div's or at least more than one.. I pasted yur javascript to the end of a page and seems to work
http://28709574.azurewebsites.net
<%@ Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

    <div class="jumbotron">
        <h1>ASP.NET</h1>
        <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS, and JavaScript.</p>
        <p><a href="http://www.asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
    </div>

    <div class="row">
        <div class="col-md-4">
            <h2>Getting started</h2>
            <p>
                ASP.NET Web Forms lets you build dynamic websites using a familiar drag-and-drop, event-driven model.
            A design surface and hundreds of controls and components let you rapidly build sophisticated, powerful UI-driven sites with data access.
            </p>
            <p>
                <a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301948">Learn more &raquo;</a>
            </p>
        </div>
        <div class="col-md-4">
            <h2>Get more libraries</h2>
            <p>
                NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.
            </p>
            <p>
                <a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301949">Learn more &raquo;</a>
            </p>
        </div>
        <div class="col-md-4">
            <h2>Web Hosting</h2>
            <p>
                You can easily find a web hosting company that offers the right mix of features and price for your applications.
            </p>
            <p>
                <a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301950">Learn more &raquo;</a>
            </p>
        </div>
    </div>
            <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.slider img:gt(0)').hide();
            setInterval(function () { $('.slider :first-child').fadeOut(2000).next('img').fadeIn(2000).end().appendTo('.slider'); }, 5000); /*5 sec*/
        });
    </script>
    <style type="text/css">
	.slider { clear:both; position:relative; height:240px; width:950px; }
	.slider img { position:absolute; left:0; top:0;cursor:pointer; }
    </style>


    <div class="slider" style="margin:0 auto;">
        <img src="Images_Slide2/1.jpg" />
        <img src="Images_Slide2/2.jpg" />
        <img src="Images_Slide2/3.jpg" />
        <img src="Images_Slide2/4.jpg" />
        <img src="Images_Slide2/5.jpg" />
        <img src="Images_Slide2/6.jpg" />
        <img src="Images_Slide2/7.jpg" />
        <img src="Images_Slide2/8.jpg" />
        <img src="Images_Slide2/9.jpg" />
        <img src="Images_Slide2/10.jpg" />
    </div>
</asp:Content>

Open in new window

Murray BrownASP.net/VSTO Developer

Author

Commented:
Thanks very much

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial