asked on

JQuery slideshow script is not working

I followed a video I found on YouTube to make a slideshow using JQuery (https://www.youtube.com/watch?v=5_P3Auq-U8c). I'm not sure what I am doing wrong but my pictures do not display. Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Slide Show Test</title>
    <style type="text/css">
        .slider 
        {
	        width: 600px;
	        height: 200px;
	        overflow: hidden;
	        margin: 30px auto;	
	        /*padding: 0;
	        background-color: #006699; /*#005daa;*/
	        /*float: left;*/
        }
        .slider img 
        {
            width: 600px;
            height: 200px;
            display: none;
        }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
    <script type="text/javascript">
        function Slider() {
            $(".slider#1").show("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 src="images\HomePagePics\Altar_2-24-11.JPG" alt="ABVM" id="1" />
            <img src="images\HomePagePics\Inside_2-24-11.JPG" alt="ABVM" id="2" />
            <img src="images\HomePagePics\Lt_Relief_2-24-11.JPG" alt="ABVM" id="3" />
        </div>  

</body>
</html>

Open in new window

If I remove this line from the .slider img style, the first picture displays: display: none;
However, the images do not switch.

Can anyone help me figure out what I am doing wrong?

ASKER CERTIFIED SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dyarosh

ASKER

Thank you. That solved the problem!