CODEWITHSUNDEEP
jqueryhtml
Jitender
Jitender

Reputation: 7971

slider using css and jquery

i want to make slider using jquery so i have made function whose is adding value in left attribute now i want when slider div comes to end then it suppose to come from right of its parent div like as marquee but dont wana use marquee.

http://jsfiddle.net/

<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        var left = 0;
        $(function moveable() {

            $('#slider').css('left', --left);

            setTimeout(moveable, 10)

        })
    </script>
    <style>
        .main {
            margin: 0 auto;
            width: 500px;
            height: 200px;
            border: solid 1px #F00;
            overflow: hidden
        }
        #slider {
            position: relative;
            background: #333;
            height: 200px;
        }

    </style>
</head>
<body>
    <div class="main">
        <div id="slider">
            <img src="slider.jpg" width="500" height="200" />
        </div>
    </div>
</body>

Upvotes: 0

Views: 1454

Answers (2)

srini
srini

Reputation: 884

try something like this 

                        <html xmlns="http://www.w3.org/1999/xhtml">
                    <head>
                    <script src="http://code.jquery.com/jquery-latest.js"></script>
                    <style>
                    .main { margin:0 auto; width:500px; height:200px; border:solid 1px #F00; overflow:hidden}
                    #slider {position:relative; background:#333; height:200px;}
                    </style>
                    </head>
                    <body>
                    <div class="main">
                    <div id="slider">
                      <img src="test.png" width="500" height="200" alt="image" id="slider_img" /></div>
                    </div>
                    <script type="text/javascript">
                        var left=0;
                         $("#slider_img").click(function () {
                         $(function moveable(){
                        $('#slider').css('left' ,--left);
                        setTimeout(moveable,10)
                        });
                        });
                    </script>
                    </body>
                    </html>

check jsfiddle output

http://jsfiddle.net/srinivasan/T7xhW/2/

Upvotes: 1

Thach Mai
Thach Mai

Reputation: 945

There's already a jQuery UI slider: http://jqueryui.com/demos/slider/

It works well and the styling options are excellent. If there's no constraints against jQuery UI, I highly suggest using it instead.

Upvotes: 0

Related Questions