Бесконечная карусель не работает
Пытаясь увидеть эту карусель, делающую бесконечные круги. После последнего изображения снова увидите первое изображение, а перед первым - последнее изображение.
Был использован этот
Jquery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
$(document).ready(function() {
$('#carousel_ul li:first').before($('#carousel_ul li:last'));
$('#right_scroll img').click(function(){
var item_width = $('#carousel_ul li').outerWidth() + 10;
var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;
$('#carousel_ul').animate({'left' : left_indent},{queue:false, duration:500},function(){
$('#carousel_ul li:last').after($('#carousel_ul li:first'));
$('#carousel_ul').css({'left' : '-210px'});
});
});
$('#left_scroll img').click(function(){
var item_width = $('#carousel_ul li').outerWidth() + 10;
var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;
$('#carousel_ul').animate({'left' : left_indent},{queue:false, duration:500},function(){
$('#carousel_ul li:first').before($('#carousel_ul li:last'));
$('#carousel_ul').css({'left' : '-210px'});
});
});
});
CSS
#carousel_inner { float:left; width:90%; overflow: hidden; }
#carousel_ul {position:relative; left:-210px; list-style-type: none; margin: 0px; padding: 0px; width:9999px; padding-bottom:10px;}
#carousel_ul li{float: left;width:200px; padding:0px; height:110px;background: #FFF;margin-top:10px;margin-bottom:10px;margin-left:5px;margin-right:5px;}
#carousel_ul li img {.margin-bottom:-4px; cursor:pointer; cursor: hand; border:0px;}
#left_scroll, #right_scroll{float:left; height:130px; width:5%;}
#left_scroll img, #right_scroll img{cursor: pointer; cursor: hand;}