how do i slide images left to right or right to left using jquery?

javascript jquery css image slider

26,999

Click here to view example I knocked up. You can easily change the code to work on a timed interval:

$(document).ready(function(){
            $('#rotator > a.arrow.left').click(function(e){
                e.preventDefault;
                var rotator = $('#rotator .images');
                rotator.children('.imageHolder').first().animate({marginLeft:"-=310px"}, function(){
                    $(this).appendTo(rotator).removeAttr("style");
                });
            });
            $('#rotator > a.arrow.right').click(function(e){
                e.preventDefault;
                var rotator = $('#rotator .images');
                rotator.children('.imageHolder').last().prependTo(rotator).removeAttr("style").css("margin-left", "-310px").animate({marginLeft:"0"});
            });
        });

CSS

#rotator{width:310px; height:220px; position:relative; overflow:hidden;  position:relative;}
#rotator .images{width:1000%; position:relative; z-index:1;}
#rotator a.arrow{width:18px; height:41px; display:block; z-index:2; text-indent:-50000em; position:absolute; top:89px; background:#FFF;}
#rotator a.arrow.left{left:0;}
#rotator a.arrow.right{right:0;}
#rotator .images .imageHolder{width:310px; float:left; height:220px; position:relative;}
#rotator  .images .imageHolder span {width:290px; margin: 10px; color:#FFF;  font-size:18px; position:absolute; top:0; left:0; z-index:4;}
#rotator .images .imageHolder img{width:310px;  height:220px; position:absolute; display:block; top:0; left:0; z-index:3;}

HTML

<!DOCTYPE html>
<html>

<body>
    <div id="rotator">
        <a href="#" class="arrow left"></a>
        <div class="images">
            <div class="imageHolder">
                <span>Image Number 1</span>
                <img src="http://www.random-images.com/image/obj21geo38pg1p5.jpg" alt="" />
            </div>
            <div class="imageHolder">
                <span>Image Number 2</span>
                <img src="http://www.jpl.nasa.gov/images/wise/20100217/pia12832-browse.jpg" alt="" />
            </div>
            <div class="imageHolder">
                <span>Image Number 3</span>
                <img src="http://www.boingboing.net/images/_images__wikipedia_commons_a_aa_Polarlicht_2.jpg" alt="" />
            </div>
            <div class="imageHolder">
                <span>Image Number 4</span>
                <img src="http://www.aviation-images.com/user/zooms/118/451nw/aviation-images.com21079968wm.jpg?d=1179938582" alt="" />
            </div>
        </div>
        <a href="#" class="arrow right"></a>
    </div>
</body>
</html>

26,999

Author by

arun nair

Updated on July 09, 2022

Comments

arun nair almost 2 years

I'm trying to build a simple image slider for my webpage, and here's the code that I have come up with using jquery, css -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
    *{
    margin:0; padding:0;
    }
    #container{
    position:absolute; left:100px; top:100px;
    width:102px;height:102px; 
    border:1px solid red;   
    overflow:hidden; display:inline;
    }
    #container img{float:left;}
</style>
<script type="text/javascript">
    $(document).ready(function(){
        setInterval(slideImages, 5000);
        function slideImages(){
        $('#container img:first-child').clone().appendTo('#container');
        $('#container img:first-child').remove();
        }
    });
</script>
</head>
<body>

    <div id="container">
    <img src="1.jpg" />
    <img src="2.jpg" />
    <img src="3.jpg" />
    <img src="4.jpg" />
    <img src="5.jpg" />
    </div>
</body>
</html>

While the code works and displays the images, I would like to add some more effects to it by having the new image slide into the 'container' pane. Like sliding from right direction to the left, and then staying there for sometime and then the next image replaces the existin one by again sliding from right to left.

Please guide me as to how to get the sliding r-to-l effect. I know i can slide up/down using jquery.. but how to do it l-r or r-l?

Thanks!