CODEWITHSUNDEEP
javascriptjqueryhtml
VenushkaT
VenushkaT

Reputation: 1150

My jQuery slider doesn't work properly

I have developed a custom slider. I'm having only one image animation occur, and the other images are not displaying. How do I show the other images with an animation?

<html>
    <head>
        <title>TODO supply a title</title>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style type="text/css">
        .Slider
        {
            width: 800px;
            height: 350px;
            overflow: hidden;
            margin: 30px auto;
            background-image:url(http://cdn.css-tricks.com/wp-content/uploads/2011/02/spinnnnnn.gif);
            background-repeat: no-repeat;
            background-position: center;
        }
        .Shadow
        {
            background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSb6KDmhtvsBAzkpXLHcijTuE_gYERTMkx5xpkbUS0lwV8ByTFx);
            background-repeat: no-repeat;
            background-position: top;
            width: 864px;
            height: 144px;
            margin: -60px auto;

        }
        .Slider img{
            width: 800px;
            height: 350px;
            display: none;
        }


        </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").show("fade",500);
                $(".Slider #1").delay(5500).hide("slide",{direction:'left'},500);
            }
            var slderCount=$(".Slider img.").size();
            var count=2;

            setInterval(function()
            {
                $("Slider #"+count).show("slide",{direction:'left'},500);
                $("Slider #"+count).delay(5500).hide("slide",{direction:'left'},500);

                if(count==slderCount)
                {
                    count=1;
                }
                else
                {
                    count=count+1;
                }
            },6500);


        </script>


    </head>
    <body onload="Slider();">
        <div class="Slider">
           <img id="1" src="http://accessengsl.com/wp-content/files_mf/1.jpg"  border="0"  alt="Helping develop"/>
            <img id="2" src="http://accessengsl.com/wp-content/files_mf/trincokanthaleroad.jpg"  border="0"  alt="Helping concrete" />
            <img id="3" src="http://accessengsl.com/wp-content/files_mf/08_new.jpg"  border="0"  alt="no  develop" />

        </div>
        <div class="Shadow"> </div>

    </body>
</html>

Upvotes: 0

Views: 195

Answers (3)

martynas
martynas

Reputation: 12300

Your slider count selector is wrong:

var slderCount=$(".Slider img.").size();

Should be:

var slderCount = $(".Slider").find("img").length;

But honestly, you are just reinventing the wheel. Use tinycarousel or any other slider plugin.

Upvotes: 1

Amit Joki
Amit Joki

Reputation: 59232

Change var slderCount=$(".Slider img.").size(); to

var slderCount=$(".Slider img").length;

Upvotes: 1

HB Kautil
HB Kautil

Reputation: 267

Trym

setInterval(function()
            {
                $(".Slider #"+count).show("slide",{direction:'left'},500);
                $(".Slider #"+count).delay(5500).hide("slide",{direction:'left'},500);

                if(count==slderCount)
                {
                    count=1;
                }
                else
                {
                    count=count+1;
                }
            },6500);

Upvotes: 0

Related Questions