jquery - 無限カルーセル不格好....最初は

Question

jQuery 無限カルーセルは機能しますが、不安定です。クリックして「右にスクロール」すると、前方にジャンプしてから、開始位置にリセットされます。その後、クリックするたびに正常に機能し、その後すぐにスクロールします。「左スクロール矢印」をクリックするとスムーズに移動しますが、「無限」の側面は壊れています。スクロールすると、空白が残り、空白が適切な画像に置き換えられます。これはすべてのブラウザで発生します。

質問:マージンまたはカルーセル コンテナーの幅が間違っていると、このように動作しますか? そうでない場合、何が原因ですか？

HTML

<div id='carousel_container'>
  <div id='left_scroll'><img src='<?php bloginfo('template_url'); ?>/images/left.png' /></div>
  <div id='carousel_inner'>
        <ul id='carousel_ul'>
            <li class="shadow"><a href="videos"><h1>Video</h1><div id="youtubeThumb"><object width="314" height="206"><param name="movie" value="http://www.youtube.com/v/3aVnkBRcXEg?version=3&autoplay=1&loop=1&3aVnkBRcXEg&controls=0&showinfo=0&modestbranding"></param><param name="allowFullScreen" value="false"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/3aVnkBRcXEg?version=3&autoplay=1&loop=1&playlist=3aVnkBRcXEg&controls=0&showinfo=0&modestbranding" type="application/x-shockwave-flash" width="314" height="206" allowscriptaccess="always" ></embed></object></div></a></li>
            <li class="shadow"><a href="testimonials"><h1>Testimonials</h1><img src='<?php bloginfo('template_url'); ?>/images/FeatureBlockTestimonials2.jpg' /></a></li>
            <li class="shadow"><a href="posts/category/news"><h1>News</h1><img src='<?php bloginfo('template_url'); ?>/images/newsThumb1.jpg' /></a></li>
            <li class="shadow"><a href="gallery"><h1>Gallery</h1><img src='<?php bloginfo('template_url'); ?>/images/GalleryThumb2.jpg' /></a></li>


            <li class="shadow"><a href="posts/category/for-sale/"><h1>For Sale</h1><img src='<?php bloginfo('template_url'); ?>/images/saleThumb1.jpg' /></a></li>
            <li class="shadow"><a href="posts/category/finished-hemis"><h1>Finished HEMI's</h1><img src='<?php bloginfo('template_url'); ?>/images/finishedThumb1.jpg' /></a></li>
            <li class="shadow"><a href="posts/category/projects/"><h1>Projects</h1><img src='<?php bloginfo('template_url'); ?>/images/projectThumb1.jpg' /></a></li>
        </ul>
  </div>
  <div id='right_scroll'><img src='<?php bloginfo('template_url'); ?>/images/right.png' /></div>
</div>

JS

 $(document).ready(function() {

        //move he last list item before the first item. The purpose of this is if the user clicks to slide left he will be able to see the last item
        $('#carousel_ul li:first').before($('#carousel_ul li:last'))

        //when user clicks the image for sliding right
        $('#right_scroll img').click(function(){

            //get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
            var item_width = $('#carousel_ul li').outerWidth() + 52;

            //calculate the new left indent of the unordered list
            var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;

            //make the sliding effect using jquery's anumate function '
            $('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){    

                //get the first list item and put it after the last list item (that's how the infinite effects is made) '
                $('#carousel_ul li:last').after($('#carousel_ul li:first'));

                //and get the left indent to the default -210px
                $('#carousel_ul').css({'left' : '-0px'});
            }); 
        });

        //when user clicks the image for sliding left
        $('#left_scroll img').click(function(){
            var item_width = $('#carousel_ul li').outerWidth() + 52;

            /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
            var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;
            $('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){    

            /* when sliding to left we are moving the last item before the first list item */            
            $('#carousel_ul li:first').before($('#carousel_ul li:last')); 

            /* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */
            $('#carousel_ul').css({'left' : '-0px'});
            });
        });
  });

CSS

/*CAROUSEL*/

#carousel_container{
    width:1190px;
    height:220px;
    margin-left:-110px;
}


#carousel_inner {
float:left; /* important for inline positioning */
width:1098px; /* important (this width = width of list item(including margin) * items shown */
overflow: hidden;
position:relative;  /* important (hide the items outside the div) */
/* non-important styling bellow */
/*background: #F0F0F0;*/
}

#carousel_ul {
position:relative;
left:-368px; /* important (this should be negative number of list items width(including margin) */
list-style-type: none; /* removing the default styling for unordered list items */
margin: 0px;
padding: 0px;
width:2562px; /* important */
/* non-important styling bellow */
padding-bottom:10px;
}

#carousel_ul li{
float: left; /* important for inline positioning of the list items */
width:314px;  /* fixed width, important */
/* just styling bellow*/
padding:0px;
height:218px;
background:url('images/repeatingContentBG1.png') repeat;
margin-top:10px;
margin-bottom:10px;
margin-left:26px;
margin-right:26px;
}

#carousel_ul li img {
.margin-bottom:-4px; /* IE is making a 4px gap bellow an image inside of an anchor (<a href...>) so this is to fix that*/
/* styling */
cursor:pointer;
cursor: hand;
border:0px;
margin-top:-25px;
z-index:99;
}

#carousel_ul li h1 {
    margin-top:0px;
    z-index:9999;
    position:relative;
    font-family:impact;
}
#left_scroll, #right_scroll{
float:left;
height:96px;
width:94px;
margin-top:60px;
/*background: #C0C0C0;*/
}
#left_scroll{
    float: left;
    margin-left: 20px;
    margin-right: -60px;
    position: relative;
    z-index: 1999;
}

#right_scroll{
    position: relative;
    z-index: 1999;
    margin-left:-58px;
    margin-top:65px;
}

#left_scroll, #right_scroll a:hover{
    top:5px;
}

#left_scroll img, #right_scroll img{
/*styling*/
cursor: pointer;
cursor: hand;
}

#youtubeThumb {
    width:314px;
    height:187px;
    margin-top:-25px;
    overflow:hidden;
}