Create a simple image carousel with jQuery. Perfect for html blocks using your favorite portal.

Demo: Carousel

The JS:

Code Select Expand

<script type="text/javascript">
$(document).ready(function() {
 
    //grab the width and calculate left value
    var item_width = $('#slides li').outerWidth();
    var left_value = item_width * (-1);
         
    //move the last item before first item, just in case user click prev button
    $('#slides li:first').before($('#slides li:last'));
     
    //set the default item to the correct position
    $('#slides ul').css({'left' : left_value});

    //if user clicked on prev button
    $('#prev').click(function() {

        //get the right position           
        var left_indent = parseInt($('#slides ul').css('left')) + item_width;

        //slide the item           
        $('#slides ul').animate({'left' : left_indent}, 200,function(){   

            //move the last item and put it as first item               
            $('#slides li:first').before($('#slides li:last'));           

            //set the default item to correct position
            $('#slides ul').css({'left' : left_value});
         
        });

        //cancel the link behavior           
        return false;
             
    });

 
    //if user clicked on next button
    $('#next').click(function() {
         
        //get the right position
        var left_indent = parseInt($('#slides ul').css('left')) - item_width;
         
        //slide the item
        $('#slides ul').animate({'left' : left_indent}, 200, function () {
             
            //move the first item and put it as last item
            $('#slides li:last').after($('#slides li:first'));                 
             
            //set the default item to correct position
            $('#slides ul').css({'left' : left_value});
         
        });
                 
        //cancel the link behavior
        return false;
         
    });       
     
    //if mouse hover, pause the auto rotation, otherwise rotate it
    $('#slides').hover(
         
        function() {
            clearInterval(run);
        },
        function() {
            run = setInterval('rotate()', speed);   
        }
    );
         
});

//a simple function to click next link
//a timer will call this function, and the rotation will begin :) 
function rotate() {
    $('#next').click();
}
</script>


The CSS:

Code Select Expand


<style type="text/css">
#carousel {
    width:255px;
    height:290px;   
    margin:0 auto;
}

#slides {
    overflow:hidden;
    /* fix ie overflow issue */
    position:relative;
    width:250px;
    height:250px;
    border:1px solid #ccc;
}

/* remove the list styles, width : item width * total items */
#slides ul {
    position:relative;
    left:0;
    top:0;
    list-style:none;
    margin:0;
    padding:0; 
    width:750px;           
}

/* width of the item, in this case I put 250x250x gif */
#slides li {
    width:250px;
    height:250px;   
    float:left;
}

#slides li img {
    padding:5px;
}

/* Styling for prev and next buttons */
#buttons {
    padding:0 0 5px 0; 
    float:right;
}

#buttons a {
    display:block;
    width:31px;
    height:32px;
    text-indent:-999em;
    float:left;
    outline:0;
}

a#prev {
    background:url(arrow.gif) 0 -31px no-repeat;
}

a#prev:hover {
    background:url(arrow.gif) 0 0 no-repeat;
}

a#next {
    background:url(arrow.gif) -32px -31px no-repeat;
}

a#next:hover {
    background:url(arrow.gif) -32px 0 no-repeat;
}

.clear {clear:both}
</style>


The markup:

Code Select Expand


<div id="carousel">
    <div id="buttons">
        <a href="#" id="prev">prev</a>
        <a href="#" id="next">next</a>
        <div class="clear"></div>
    </div>
     
    <div class="clear"></div>

<div id="carousel">
    <div id="buttons">
        <a href="#" id="prev">prev</a>
        <a href="#" id="next">next</a>
        <div class="clear"></div>
    </div>
     
    <div class="clear"></div>

    <div id="slides">
        <ul>
            <li><img src="slide1.png" width="240" height="240" alt="Slide 1"/></li>
            <li><img src="slide2.png" width="240" height="240" alt="Slide 2"/></li>
            <li><img src="slide3.png" width="240" height="240" alt="Slide 3"/></li>
        </ul>
        <div class="clear"></div>
    </div>

</div>


If you want to add auto slide to it, find:

Code Select Expand


//grab the width and calculate left value

Add before:

Code Select Expand

//rotation speed and timer
var speed = 5000;
var run = setInterval('rotate()', speed);

This is perfect for my other website thank you Mick just what the Dr ordered lol
do I save the top code as carasel.jquery?

I have it all inside a html block like this:

Code Select Expand

<script type="text/javascript">
$(document).ready(function() {

 
     
    //grab the width and calculate left value
    var item_width = $('#slides li').outerWidth();
    var left_value = item_width * (-1);
         
    //move the last item before first item, just in case user click prev button
    $('#slides li:first').before($('#slides li:last'));
     
    //set the default item to the correct position
    $('#slides ul').css({'left' : left_value});

    //if user clicked on prev button
    $('#prev').click(function() {

        //get the right position           
        var left_indent = parseInt($('#slides ul').css('left')) + item_width;

        //slide the item           
        $('#slides ul').animate({'left' : left_indent}, 200,function(){   

            //move the last item and put it as first item               
            $('#slides li:first').before($('#slides li:last'));           

            //set the default item to correct position
            $('#slides ul').css({'left' : left_value});
         
        });

        //cancel the link behavior           
        return false;
             
    });

 
    //if user clicked on next button
    $('#next').click(function() {
         
        //get the right position
        var left_indent = parseInt($('#slides ul').css('left')) - item_width;
         
        //slide the item
        $('#slides ul').animate({'left' : left_indent}, 200, function () {
             
            //move the first item and put it as last item
            $('#slides li:last').after($('#slides li:first'));                 
             
            //set the default item to correct position
            $('#slides ul').css({'left' : left_value});
         
        });
                 
        //cancel the link behavior
        return false;
         
    });       
     
    //if mouse hover, pause the auto rotation, otherwise rotate it
    $('#slides').hover(
         
        function() {
            clearInterval(run);
        },
        function() {
            run = setInterval('rotate()', speed);   
        }
    );
         
});

//a simple function to click next link
//a timer will call this function, and the rotation will begin :) 
function rotate() {
    $('#next').click();
}
</script>


<style type="text/css">
#carousel {
    width:255px;
    height:290px;   
    margin:0 auto;
}

#slides {
    overflow:hidden;
    /* fix ie overflow issue */
    position:relative;
    width:250px;
    height:250px;
    border:1px solid #ccc;
}

/* remove the list styles, width : item width * total items */
#slides ul {
    position:relative;
    left:0;
    top:0;
    list-style:none;
    margin:0;
    padding:0; 
    width:750px;           
}

/* width of the item, in this case I put 250x250x gif */
#slides li {
    width:250px;
    height:250px;   
    float:left;
}

#slides li img {
    padding:5px;
}

/* Styling for prev and next buttons */
#buttons {
    padding:0 0 5px 0; 
    float:right;
}

#buttons a {
    display:block;
    width:31px;
    height:32px;
    text-indent:-999em;
    float:left;
    outline:0;
}

a#prev {
    background:url(images/arrow.gif) 0 -31px no-repeat;
}

a#prev:hover {
    background:url(images/arrow.gif) 0 0 no-repeat;
}

a#next {
    background:url(images/arrow.gif) -32px -31px no-repeat;
}

a#next:hover {
    background:url(images/arrow.gif) -32px 0 no-repeat;
}

.clear {clear:both}
</style>


<div id="carousel">
    <div id="buttons">
        <a href="#" id="prev">prev</a>
        <a href="#" id="next">next</a>
        <div class="clear"></div>
    </div>
     
    <div class="clear"></div>

    <div id="slides">
        <ul>
            <li><img src="slide1.png" width="240" height="240" alt="Slide 1"/></li>
            <li><img src="slide2.png" width="240" height="240" alt="Slide 2"/></li>
            <li><img src="slide3.png" width="240" height="240" alt="Slide 3"/></li>
        </ul>
        <div class="clear"></div>
    </div>

</div>

I wasn't sure weather to do that,  and now I know Thanks to you.  Hoping to have this running in a side bar on my other website.
Thank you Mick. :)

I wasn't sure weather to do that,  and now I know Thanks to you.  Hoping to have this running in a side bar on my other website.
Thank you Mick. :)

Just resize the images and adjust the css accordingly to fit on a portal sidebar. ;)

can't seem to get the images to slide am I missing something?

can't seem to get the images to slide am I missing something?

Does it show at least the frame?

yes it shows one frame but slide

Make sure the image url is there...

Code Select Expand

            <li><img src="slide1.png" width="240" height="240" alt="Slide 1"/></li>
            <li><img src="slide2.png" width="240" height="240" alt="Slide 2"/></li>
            <li><img src="slide3.png" width="240" height="240" alt="Slide 3"/></li>

...or post your code here.

here is the code

Code Select Expand

script type="text/javascript">
$(document).ready(function() {

  //rotation speed and timer
    var speed = 5000;
    var run = setInterval('rotate()', speed);
     
    //grab the width and calculate left value
    var item_width = $('#slides li').outerWidth();
    var left_value = item_width * (-1);
         
    //move the last item before first item, just in case user click prev button
    $('#slides li:first').before($('#slides li:last'));
     
    //set the default item to the correct position
    $('#slides ul').css({'left' : left_value});

    //if user clicked on prev button
    $('#prev').click(function() {

        //get the right position           
        var left_indent = parseInt($('#slides ul').css('left')) + item_width;

        //slide the item           
        $('#slides ul').animate({'left' : left_indent}, 200,function(){   

            //move the last item and put it as first item               
            $('#slides li:first').before($('#slides li:last'));           

            //set the default item to correct position
            $('#slides ul').css({'left' : left_value});
         
        });

        //cancel the link behavior           
        return false;
             
    });

 
    //if user clicked on next button
    $('#next').click(function() {
         
        //get the right position
        var left_indent = parseInt($('#slides ul').css('left')) - item_width;
         
        //slide the item
        $('#slides ul').animate({'left' : left_indent}, 200, function () {
             
            //move the first item and put it as last item
            $('#slides li:last').after($('#slides li:first'));                 
             
            //set the default item to correct position
            $('#slides ul').css({'left' : left_value});
         
        });
                 
        //cancel the link behavior
        return false;
         
    });       
     
    //if mouse hover, pause the auto rotation, otherwise rotate it
    $('#slides').hover(
         
        function() {
            clearInterval(run);
        },
        function() {
            run = setInterval('rotate()', speed);   
        }
    );
         
});

//a simple function to click next link
//a timer will call this function, and the rotation will begin :) 
function rotate() {
    $('#next').click();
}
</script>


<style type="text/css">
#carousel {
    width:255px;
    height:290px;   
    margin:0 auto;
}

#slides {
    overflow:hidden;
    /* fix ie overflow issue */
    position:relative;
    width:250px;
    height:250px;
    border:1px solid #ccc;
}

/* remove the list styles, width : item width * total items */
#slides ul {
    position:relative;
    left:0;
    top:0;
    list-style:none;
    margin:0;
    padding:0; 
    width:750px;           
}

/* width of the item, in this case I put 250x250x gif */
#slides li {
    width:250px;
    height:250px;   
    float:left;
}

#slides li img {
    padding:5px;
}

/* Styling for prev and next buttons */
#buttons {
    padding:0 0 5px 0; 
    float:right;
}

#buttons a {
    display:block;
    width:31px;
    height:32px;
    text-indent:-999em;
    float:left;
    outline:0;
}

a#prev {
    background:url(images/arrow.gif) 0 -31px no-repeat;
}

a#prev:hover {
    background:url(images/arrow.gif) 0 0 no-repeat;
}

a#next {
    background:url(images/arrow.gif) -32px -31px no-repeat;
}

a#next:hover {
    background:url(images/arrow.gif) -32px 0 no-repeat;
}

.clear {clear:both}
</style>


<div id="carousel">
    <div id="buttons">
        <a href="#" id="prev">prev</a>
        <a href="#" id="next">next</a>
        <div class="clear"></div>
    </div>
     
    <div class="clear"></div>

    <div id="slides">
        <ul>
            <li><img src="http://graphicjunki.net/images/slide1.png" width="240" height="240" alt="Slide 1"/></li>
            <li><img src="http://graphicjunki.net/images/slide2.png" width="240" height="240" alt="Slide 2"/></li>
            <li><img src="http://graphicjunki.net/images/slide3.png" width="240" height="240" alt="Slide 3"/></li>
        </ul>
        <div class="clear"></div>
    </div>

</div>

and today for some reason i'm getting a block full of code and at the end it displays the image  :o

Code Select Expand

<script type="text/javascript">
$(document).ready(function() {

  //rotation speed and timer
    var speed = 5000;
    var run = setInterval('rotate()', speed);
     
    //grab the width and calculate left value
    var item_width = $('#slides li').outerWidth();
    var left_value = item_width * (-1);
         
    //move the last item before first item, just in case user click prev button
    $('#slides li:first').before($('#slides li:last'));
     
    //set the default item to the correct position
    $('#slides ul').css({'left' : left_value});

    //if user clicked on prev button
    $('#prev').click(function() {

        //get the right position           
        var left_indent = parseInt($('#slides ul').css('left')) + item_width;

        //slide the item           
        $('#slides ul').animate({'left' : left_indent}, 200,function(){   

            //move the last item and put it as first item               
            $('#slides li:first').before($('#slides li:last'));           

            //set the default item to correct position
            $('#slides ul').css({'left' : left_value});
         
        });

        //cancel the link behavior           
        return false;
             
    });

 
    //if user clicked on next button
    $('#next').click(function() {
         
        //get the right position
        var left_indent = parseInt($('#slides ul').css('left')) - item_width;
         
        //slide the item
        $('#slides ul').animate({'left' : left_indent}, 200, function () {
             
            //move the first item and put it as last item
            $('#slides li:last').after($('#slides li:first'));                 
             
            //set the default item to correct position
            $('#slides ul').css({'left' : left_value});
         
        });
                 
        //cancel the link behavior
        return false;
         
    });       
     
    //if mouse hover, pause the auto rotation, otherwise rotate it
    $('#slides').hover(
         
        function() {
            clearInterval(run);
        },
        function() {
            run = setInterval('rotate()', speed);   
        }
    );
         
});

//a simple function to click next link
//a timer will call this function, and the rotation will begin :) 
function rotate() {
    $('#next').click();
}
</script>


<style type="text/css">
#carousel {
    width:255px;
    height:290px;   
    margin:0 auto;
}

#slides {
    overflow:hidden;
    /* fix ie overflow issue */
    position:relative;
    width:250px;
    height:250px;
    border:1px solid #ccc;
}

/* remove the list styles, width : item width * total items */
#slides ul {
    position:relative;
    left:0;
    top:0;
    list-style:none;
    margin:0;
    padding:0; 
    width:750px;           
}

/* width of the item, in this case I put 250x250x gif */
#slides li {
    width:250px;
    height:250px;   
    float:left;
}

#slides li img {
    padding:5px;
}

/* Styling for prev and next buttons */
#buttons {
    padding:0 0 5px 0; 
    float:right;
}

#buttons a {
    display:block;
    width:31px;
    height:32px;
    text-indent:-999em;
    float:left;
    outline:0;
}

a#prev {
    background:url(images/arrow.gif) 0 -31px no-repeat;
}

a#prev:hover {
    background:url(images/arrow.gif) 0 0 no-repeat;
}

a#next {
    background:url(images/arrow.gif) -32px -31px no-repeat;
}

a#next:hover {
    background:url(images/arrow.gif) -32px 0 no-repeat;
}

.clear {clear:both}
</style>


<div id="carousel">
    <div id="buttons">
        <a href="#" id="prev">prev</a>
        <a href="#" id="next">next</a>
        <div class="clear"></div>
    </div>
     
    <div class="clear"></div>

    <div id="slides">
        <ul>
            <li><img src="http://graphicjunki.net/images/slide1.png" width="240" height="240" alt="Slide 1"/></li>
            <li><img src="http://graphicjunki.net/images/slide2.png" width="240" height="240" alt="Slide 2"/></li>
            <li><img src="http://graphicjunki.net/images/slide3.png" width="240" height="240" alt="Slide 3"/></li>
        </ul>
        <div class="clear"></div>
    </div>

</div>

Try this...

All the code has gone but still no rotation of slides,  Oh and thanks Mick for helping me out with this :)
I even try a footer block and still the same.

your code:  5   (temporary page)

Auto slide.

Do you have another script that uses jquery in the same page?