JQuery Slider Code doesn't work

StackOverflow https://stackoverflow.com/questions/23218793

  •  07-07-2023
  •  | 
  •  

Question

Here is the file link: http://www.webeetech.com/Projects/Test/slider.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
<html xmlns="w3.org/1999/xhtml">;    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Slider</title>
        <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
        <script type="text/javascript">
            $("#slideshow > div:gt(0)").hide();
            setInterval(function() {
                $('#slideshow > div:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
            }, 3000);
        </script>
        <style>
            #slideshow {
                margin: 50px auto;
                position: relative;
                width: 240px;
                height: 240px;
                padding: 10px;
                box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
            }
            #slideshow > div {
                position: absolute;
                top: 10px;
                left: 10px;
                right: 10px;
                bottom: 10px;
            }
        </style>
    </head>

Can anyone help??

Thanks in advance.

Was it helpful?

Solution

Seem like you cannot load jQuery properly:

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

result in this error:

Failed to load resource: the server responded with a status of 404 (Not Found)

as well as:

Uncaught ReferenceError: $ is not defined

So correct your path or better using CDN with later version since 1.2.6 is too outdated already:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

You also need to wrap your jQuery code inside DOM ready handler:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
    $("#slideshow > div:gt(0)").hide();
    setInterval(function() { 
        $('#slideshow > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
    },  3000);
});
</script>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top