Why does this jQuery slider work vertically but not horizontally?

I have a slider that has a main image area and small thumbs on the side. When you click on a thumb it loads that image in a larger size in the main image area. There are also next and previous links. If there are more thumbs then there is space for to show then only 13 are shown and the rest hidden. When you click on "next" all the thumbs move up one causing one more to be exposed. When you click "previous" all the thumbs move down one causing one more previous thumb to be exposed. That's how it works with vertical scrolling, and here's the code for it:

HTML:

    <div class="gallery">
        <div id="gallery_actions">
            <div class="gallery_count"><span class="counter">3</span> / 17</div>
            <div class="view_slideshow"><label><input class="slideshow_toggle" type="checkbox">Start slideshow</label></div>
        </div>
        <div class="carousel">
            <div class="arrow arrow_previous"></div>
            <div class="carousel_region">
                <div class="carousel_subregion">

<ul class="carousel_slide">
    <li class="thumb" id="carousel_thumb_5626316" data-json="{'id':'5626316'}">
    <img src="shark_files/fb1490b2aa8dcf9a64861f9dcab86ca1.jpg" alt="Picture: 1920315" height="30" width="40">
    </li>

    <li class="thumb" id="carousel_thumb_4034028" data-json="{'id':'4034028'}">
    <img src="shark_files/fa41b5ff4a148ac68e65d1dcfd2c5f6a.jpg" alt="Picture: 1911579" height="30" width="40">
    </li>

    <li class="thumb selected" id="carousel_thumb_4063804" data-json="{'id':'4063804'}">
    <img src="shark_files/b2850e2656bd41efe09f4df2cfadecc3.jpg" alt="Picture: 1914572" height="30" width="40">
    </li>

    <li class="thumb" id="carousel_thumb_3903274" data-json="{'id':'3903274'}">
    <img src="shark_files/d2e254b960b5dbb854b905c67ff68e1b.jpg" alt="Picture: 1901129" height="30" width="40">
    </li>

    <li class="thumb" id="carousel_thumb_99834" data-json="{'id':'99834'}">
    <img src="shark_files/71389663b3c371be9ad953273a0894c4.jpg" alt="Picture: 1704362" height="30" width="40">
    </li>

    <li class="thumb" id="carousel_thumb_3119931" data-json="{'id':'3119931'}">
    <img src="shark_files/eca402b67c9126340540aa1c62bc83c3.jpg" alt="Picture: 1792796" height="30" width="40">
    </li>

    <li class="thumb" id="carousel_thumb_3955105" data-json="{'id':'3955105'}">
    <img src="shark_files/2244914dee3f7e23ca5a2a1103a29934.jpg" alt="Picture: 1905495" height="30" width="40">
    </li>

    <li class="thumb" id="carousel_thumb_6254076" data-json="{'id':'6254076'}">
    <img src="shark_files/39fa72602391c40bc3844d07d68e4e57.jpg" alt="Picture: 1942819" height="30" width="40">
    </li>

    <li class="thumb" id="carousel_thumb_61197" data-json="{'id':'61197'}">
    <img src="shark_files/e194fd0bcb8c652e56321d3850fb6ca0.jpg" alt="Picture: 3685" height="30" width="40">
    </li>

    <li class="thumb" id="carousel_thumb_58516" data-json="{'id':'58516'}">
    <img src="shark_files/143f53f536ae4b12b82b615f37de2313.jpg" alt="Picture: 16870" height="30" width="40">
    </li>

    <li class="thumb" id="carousel_thumb_42148" data-json="{'id':'42148'}">
    <img src="shark_files/6fdbf9d94d8c325c0fc2ccbbf0ef10b9.jpg" alt="Picture: 1608493" height="30" width="40">
    </li>

    <li class="thumb" id="carousel_thumb_43248" data-json="{'id':'43248'}">
    <img src="shark_files/296697046f7d5ade52b9c0c8330894a8.jpg" alt="Picture: 1596140" height="30" width="40">
    </li>

    <li class="thumb" id="carousel_thumb_44795" data-json="{'id':'44795'}">
    <img src="shark_files/4fcd7df720d497ddfca91e23c812dcc6.jpg" alt="Picture: 148030" height="30" width="40">
    </li>

    <li class="thumb" id="carousel_thumb_47611" data-json="{'id':'47611'}">
    <img src="shark_files/6a7fd11395364258f7ba78b40756c073.jpg" alt="Picture: 105834" height="30" width="40">
    </li>

    <li class="thumb" id="carousel_thumb_56197" data-json="{'id':'56197'}">
    <img src="shark_files/53469c1aca114944f1b380cd17dff886.jpg" alt="Picture: 39682" height="30" width="40">
    </li>

    <li class="thumb" id="carousel_thumb_6564813" data-json="{'id':'6564813'}">
    <img src="shark_files/2d2bc3ff87b089141f2cebc318d7e9c0.jpg" alt="Picture: 1955011" height="30" width="40">
    </li>

    <li class="thumb" id="carousel_thumb_42795" data-json="{'id':'42795'}">
    <img src="shark_files/1e2f946e9a0b4fd42399569761c0820b.jpg" alt="Picture: 1601015" height="30" width="40">
    </li>
</ul>
                </div>
            </div>
            <div class="arrow arrow_next"></div>
        </div>
        <div id="pic_main"><img style="position: relative; top: 131.5px;" src="shark_files/8d1ff92265c0e162dcc35fb49de19ae6.jpg" alt="Picture: 11896846" height="337" width="450"></div>
        <div class="pic_info">
            <div class="title">Title goes here</div>
            <div id="description" class="description">Description goes here</div>
        </div>
    </div>

CSS FOR VERTICAL SLIDE:

.gallery {
    background: #000;
    color: #fff;
    padding: 10px;
}
.gallery .gallery_count {
    float: right;
    font-size: 14px;
    font-weight: bold;
}
.gallery #gallery_actions .gallery_count { float: right; }

.carousel {
    float: right;
    width: 125px;
}

.carousel .arrow {
    display: block;
    height: 20px;
    background: url(../sprite_slideshow_controls.png) no-repeat top left;   
    width: 46px;
    height: 30px;   
}

.carousel .arrow_previous {
    background-position: 0 0;
}

.carousel .arrow_previous:hover {
    background-position: 0 -30px;
    cursor: pointer;
}
.carousel .arrow_previous:active {
    background-position: 0 -60px;
}

.carousel .arrow_next {
    background-position: -46px 0;
}

.carousel .arrow_next:hover {
    background-position: -46px -30px;
    cursor: pointer;
}

.carousel .arrow_next:active {
    background-position: -46px -60px;   
}

.carousel .carousel_region {
    overflow: hidden;   
    width: 40px;
    height: 450px;
}

.carousel .carousel_subregion {
    overflow: hidden;
    z-index: 1000;
    position: relative; 
    width: 40px;
    height: 450px;  
}

.carousel ul {
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 500;
}

.carousel ul li {
    float: left;
    overflow: hidden;
    margin: 0 0 5px 0;
    opacity: .5;
    filter: alpha(opacity = 50);
    background: #ccc;   
    width: 40px;
    height: 30px;   
}

.carousel ul li:hover {
    opacity: .8;
    filter: alpha(opacity = 80);
}

.carousel ul li.selected, .carousel ul li.selected:hover {
    opacity: 1;
    filter: alpha(opacity = 100);
}

.carousel .thumb img {
    cursor: pointer;
}

#pic_main {
    text-align: center;
    background: #000;
    border: 1px solid red;
    width: 600px;
    height: 450px;
}

#pic_main img {
    margin: 0 auto;
    display: block;
}

#pic_main img.loading {
    display: block;
    position: relative;
    top: 280px;
}

#pic_main img:first {
    display: block;
}

JQUERY PLUGIN CODE:

(function($) {
    if(typeof($.fn.scrollTo) == 'function') {
        $.fn.slideShow = function(options) {
            var defaults = {
                axis: 'y',
                click: function() { },
                counter: '.counter',
                left: '.arrow_previous',
                increment: 1,
                mouseover: function() { },
                mouseout: function() { },
                next: function() { },
                previous: function() { },
                region: '.carousel_region',
                right: '.arrow_next',
                selected: '.thumb:first',
                selected_class: 'selected',
                slideshow_status: false,
                slideshow_time: 6,
                slideshow_toggle: '.slideshow_toggle',
                speed: 400,
                subregion: '.carousel_subregion',
                thumb: '.thumb'
            };

            var options = $.extend(defaults, options);

            return $(this).each(function() {
                var region = $(options.region, $(this));
                var subregion = $(options.subregion, $(this));
                var left = $(options.left, $(this));
                var right = $(options.right, $(this));
                var slideshow = $(options.slideshow_toggle);
                var timeout;

                var dimension;
                if(options.axis == 'x') {
                    dimension = region.find(options.thumb).eq(0).outerWidth();
                } else if(options.axis == 'y') {
                    dimension = region.find(options.thumb).eq(0).outerHeight();
                }

                var update_counter = function() {
                    var index = $(region).find(options.thumb).index($(region).find(options.thumb + '.' + options.selected_class));
                    $(options.counter).text(index + 1);
                };

                $(this)
                    .bind('next', function(event) { region.trigger('next'); })
                    .bind('previous', function(event) { region.trigger('previous'); });

                region
                    .bind('next', function(event) {
                        event.stopPropagation();

                        if(!$(options.thumb + ':last', region).hasClass(options.selected_class)) {
                            var next = region.find(options.thumb).index(region.find('.' + options.selected_class)) + options.increment;

                            if(next + options.increment > region.find(options.thumb).length) {
                                next = region.find(options.thumb).length - options.increment;
                            }

                            var next_thumb = region.find(options.thumb).removeClass(options.selected_class).eq(next);
                            if(next_thumb.length == 0) {
                                next_thumb = region.find(options.thumb + ':last');
                            }
                            next_thumb.addClass(options.selected_class);
                            subregion.scrollTo(next_thumb, (options.speed * options.increment), { axis: options.axis });

                            update_counter();

                            return options.next(event);
                        }
                    })
                    .bind('previous', function(event) {
                        event.stopPropagation();

                        if(!$(options.thumb + ':first', region).hasClass(options.selected_class)) {
                            var prev = region.find(options.thumb).index(region.find('.' + options.selected_class)) - options.increment;
                            if(prev < 0) {
                                prev = 0;
                            }

                            var prev_thumb = region.find(options.thumb).removeClass(options.selected_class).eq(prev);
                            if(prev_thumb.length == 0) {
                                prev_thumb = region.find(options.thumb + ':first');
                            }

                            prev_thumb.addClass(options.selected_class);
                            subregion.scrollTo(prev_thumb, (options.speed * options.increment), { axis: options.axis });

                            update_counter();

                            return options.previous(event);
                        }
                    })
                    .find(options.thumb)
                        .bind('click', function(event) {
                            // Move Selected Class
                            region.find('.' + options.selected_class).removeClass(options.selected_class);
                            $(this).addClass(options.selected_class);

                            // Update Counter
                            update_counter();

                            return options.click(event);
                        })
                        .bind('mouseover', function(event) {
                            return options.mouseover(event);
                        })
                        .bind('mouseout', function(event) {
                            return options.mouseout(event);
                        });


                left.click(function() {
                    return region.trigger('previous');
                });

                right.click(function() {
                    return region.trigger('next');
                });

                slideshow
                    .attr('checked', options.slideshow_status)
                    .click(function() {
                        if($(this).is(':checked')) {
                            region.trigger('next');

                            timeout = setInterval(function() { region.trigger('next'); }, options.slideshow_time * 850);
                        } else {
                            clearInterval(timeout);
                        }
                    });

                if(options.selected !== false) {
                    $(region).find(options.selected).click();
                    subregion.scrollTo($(options.selected, region).eq(0), options.speed);
                }
                if(options.slideshow_status) {
                    timeout = setInterval(function() { region.trigger('next'); }, options.slideshow_time * 850);
                }
            });
        };
    }
})(jQuery);

I want to change the behavior a bit and have the images scroll horizontally instead of vertically. I see that one of the plugin options is axis. I changed that value to "x" instead of "y". and changed the css to this:

.gallery {
    background: #000;
    color: #fff;
    padding: 10px;
}
.gallery .gallery_count {
    float: right;
    font-size: 14px;
    font-weight: bold;
}
.gallery #gallery_actions .gallery_count { float: right; }

.carousel {
    float: right;
    width: 125px;
    border: 1px solid green;
    width: 490px;
}

.carousel .arrow {
    display: block;
    height: 20px;
    background: url(../sprite_slideshow_controls.png) no-repeat top left;
    width: 46px;
    height: 30px;   
}

.carousel .arrow_previous {
    background-position: 0 0;
}

.carousel .arrow_previous:hover {
    background-position: 0 -30px;
    cursor: pointer;
}
.carousel .arrow_previous:active {
    background-position: 0 -60px;
}

.carousel .arrow_next {
    background-position: -46px 0;
}

.carousel .arrow_next:hover {
    background-position: -46px -30px;
    cursor: pointer;
}

.carousel .arrow_next:active {
    background-position: -46px -60px;   
}

.carousel .carousel_region {
    overflow: hidden;
    width: 490px;
    height: 30px;
}

.carousel .carousel_subregion {
    overflow: hidden;
    z-index: 1000;
    position: relative;
    width: 490px;
    height: 30px;   
}

.carousel ul {
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 500;
}

.carousel ul li {
    float: left;
    overflow: hidden;
    margin: 0 0 5px 0;
    opacity: .5;
    filter: alpha(opacity = 50);
    background: #ccc;
    width: 40px;
    height: 30px;   
}

.carousel ul li:hover {
    opacity: .8;
    filter: alpha(opacity = 80);
}

.carousel ul li.selected, .carousel ul li.selected:hover {
    opacity: 1;
    filter: alpha(opacity = 100);
}

.carousel .thumb img {
    cursor: pointer;
}

#pic_main {
    text-align: center;
    background: #000;
    border: 1px solid red;
    width: 600px;
    height: 450px;
}

#pic_main img {
    margin: 0 auto;
    display: block;
}

#pic_main img.loading {
    display: block;
    position: relative;
    top: 280px;
}

#pic_main img:first {
    display: block;
}

Otherwise the HTML and rest of the jQuery is exactly the same. It's not working however. When you click "next" the images don't slide left one causing the next in the list to 开发者_开发知识库be exposed.

I'm not sure if this is a jQuery or a CSS issue but I spent all day yesterday trying to figure it out with no luck. Can anyone please help?