Free Forever. Our themes will always be free. Forever. Period.

Create a simple carousel with jQuery

Mick in Tutorials
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 Tacos and Pizza.

Website: https://www.idesignsmf.com/

    


19 Comments

saffzuk
Jan 17, 2013
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

Mick
Jan 18, 2013
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

saffzuk
Jan 19, 2013
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

Mick
Jan 19, 2013
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

saffzuk
Jan 23, 2013
can't seem to get the images to slide am I missing something?
5

Mick
Jan 23, 2013
can't seem to get the images to slide am I missing something?

Does it show at least the frame?
6

saffzuk
Jan 24, 2013
yes it shows one frame but slide
7

Mick
Jan 24, 2013
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

Mick
Jan 24, 2013
...or post your code here.
9

saffzuk
Jan 24, 2013
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

Mick
Jan 24, 2013

<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

saffzuk
Jan 24, 2013
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

Mick
Jan 24, 2013
your code:  5   (temporary page)

Auto slide.
13

Mick
Jan 24, 2013
Do you have another script that uses jquery in the same page?
14



Connect with us:


Improve SMF

If you wish to contribute to the development of SMF you can contribute to the coding discussions taking place on Github. You are also welcome to suggest features which you would like to see added to the software in the Feature Requests board.

  Receive our monthly newsletter right in your inbox.


Advertisement  




 Tutorials
In this section you will find in-depth how-to's involving common SMF development and design techniques.



go up