How can I pause longer on a certain category?
<p>How can I get the slideshow to pause on the first category? Thanks!</p>

<pre><code>$(document).ready(function(){      

            var images = [
            { 
                 id:0,
                 images: ['media/image0.jpg'],
                    dom: null
             },
                { 
                    id:1,
                images: ['media/image1.jpg'],
                    dom: null

                },
                { 
                    id:2,
                 images: ['media/image2.jpg'],
                    dom: null

                },
                { 
                    id:3,
                     images: ['media/image3.jpg'],
                    dom: null

                },
                { 
                    id:4,
                                    images: ['media/image4.jpg'],
                    dom: null
                },
                { 
                    id:5,
                                       images: ['media/image5.jpg'],
                    dom: null
                },
                { 
                    id:6,
                                        images: ['media/image6.jpg'],
                    dom: null
                }
            ];

            function preloadImages(images, func) {        
                var i = 0;
                var cache = [];
                var loaded = 0;
                var num = images.length;

                for ( ; i &lt; num; i++ ) (function(i) {

                    var new_image = $('&lt;img/&gt;').attr('src', images[i]).load(function(){
                        loaded++;

                        if(loaded == num)
                        {                                                
                            func();                   
                        }
                    });                     
                    cache.push(new_image);
                })(i);

                return true;
            };

            for (var i=0; i &lt; images.length; i++) {   
                preloadImages(images[i].images, function () {});
            }


            var category = 0; // the current tab group to display
            var index = 0; // the current image in the tab group to display
            var slider = $("#slider-container");
            var timer = null;
            var speed = 1000;

            initCategories = function() {
                for (var i = 0; i &lt; images.length; ++i) {
                    images[i].dom = $("&lt;ul/&gt;").addClass("holder");
                    for (var j = 0; j &lt; images[i].images.length; ++j) {
                        images[i].dom.append($("&lt;li/&gt;").addClass("slide").css("background", "url(" + images[i].images[j] + ") no-repeat"));
                    }
                }
            }

            switchCategory = function(newCategory) {
                //if (newCategory != category) {
                    category = newCategory;
                    $(".slideCat").removeClass("active");
                    $(".slideCat[rel='" + category + "']").addClass("active");
                    slider.empty().append(images[category].dom);
                //}
                index = 0;
                $(".holder", slider).css("margin-left", 0);
            }

            switchSlide = function(newSlide, animate) {
                //if (newSlide != index) {
                    index = newSlide;
                    var newMargin = $(".slide:first", slider).width() * -index;
                    if (animate) {
                        $(".holder", slider).animate({"margin-left": newMargin + "px"}, speed, null, null);
                    } else {
                        $(".holder", slider).css("margin-left", newMargin + "px");
                    }
                //}
            }

            doTransition = function() {
                ++index;
                if (index &gt;= images[category].images.length) {
                    ++category;
                    if (category &gt;= images.length) {
                        category = 0;
                    }
                    switchCategory(category);
                } else {
                    switchSlide(index, true);
                }
            }

            $(".slideCat").click(function (e) {
                clearInterval(timer);
                switchCategory(this.rel);
                timer = setInterval(doTransition, 5000);
                return false;
            });

            $(".prev").click(function (e) {
                clearInterval(timer);
                --index;
                if (index &lt; 0) {
                    --category;
                    if (category &lt; 0) {
                        category = images.length - 1;
                    }
                    switchCategory(category);
                    switchSlide(images[category].images.length - 1);
                } else {
                    switchSlide(index);
                }
                timer = setInterval(doTransition, 5000);
                return false;
            });

            $(".next").click(function (e) {
                clearInterval(timer);
                ++index;
                if (index &gt;= images[category].images.length) {
                    ++category;
                    if (category &gt;= images.length) {
                        category = 0;
                    }
                    switchCategory(category);
                } else {
                    switchSlide(index, false);
                }
                timer = setInterval(doTransition, 15000);
                return false;
            });

            // this doesn't work! hover gets triggered like this, but we don't know which &lt;li/&gt; we're over.
            // if we use e.g. $(".holder", slider) or $("li", slider), the event doesn't get triggered :(
            $(slider).hover(function () {
                console.log("hover");
                clearInterval(timer);
                $(this).find(".caption").stop().fadeTo(500, 0.8);
            }, function() {
                $(this).find(".caption").stop().fadeTo(500, 0);
                timer = setInterval(doTransition, 15000);
            });

            // load the categories
            initCategories();
            switchCategory(0);
            switchSlide(0, false);
            timer = setInterval(doTransition, 15000);
       });
</code></pre>
