Create a simple carousel with jQuery

Mick in Tutorials on Jan 17, 2013
Create a simple image carousel with jQuery. Perfect for html blocks using your favorite portal.

Demo: Carousel

The JS:

<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:

<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:

<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:

		
//grab the width and calculate left value

Add before:

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


   Tagged with:


Mick

Mick G

Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time and has a weakness for Pizza.

 idesignsmf.com

    

19 Comments

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?
1

I have it all inside a html block like this:


<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>
2

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. :)
3

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. ;)
4

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

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

Does it show at least the frame?
6

yes it shows one frame but slide
7

Make sure the image url is there...

            <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>
8

...or post your code here.
9

here is the code


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

10


<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...
11

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.
12

your code:  5   (temporary page)

Auto slide.
13

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