Создана карусель, но есть ошибки, если их больше одного. (скрипка включена)

Question

Вот скрипка http://jsfiddle.net/rgbjoy/q9VGh/

Я хочу иметь несколько каруселей на одной странице, но не хочу влиять на них все.Как мне это сделать?

HTML:

<div class="project">
    <div class="prev">&nbsp;</div>
    <div class="next">&nbsp;</div>
    <ul class="detail">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>

И jQuery:

// Slider
$('.detail li:first').before($('.detail li:last'));

$('.next').click(function() {
    var itemWidth = $('.detail li').outerWidth() + 10;
    var leftIndent = parseInt($(".detail").css("left"), 10) - itemWidth;
    $('.detail').animate({
        'left': leftIndent
    }, 400, function() {
        $('.detail li:last').after($('.detail li:first'));
        $('.detail').css({
            'left': '-200px'
        });
    });
});

$('.prev').click(function() {
    var itemWidth = $('.detail li').outerWidth() + 10;
    var leftIndent = parseInt($('.detail').css('left'), 10) + itemWidth;
    $('.detail').animate({
        'left': leftIndent
    }, 400, function() {
        $('.detail li:first').before($('.detail li:last'));
        $('.detail').css({
            'left': '-200px'
        });
    });
});

- Дополнительно -

Как мнеидти о том, чтобы все элементы li были затемнены, а самый дальний слева нет?

Большое спасибо за помощь.

Answer 1

Ты делаешь такие вещи:

var itemWidth = $('.detail li').outerWidth() + 10;

$('.detail li') найдет все элементы <li> внутри элементов с классом detail. Все, что вам нужно сделать, это ограничить ваш поиск детьми соответствующего .project, и вы можете сделать это, подняв DOM, чтобы найти ваш .project, используя closest и вернувшись вниз, используя find:

var itemWidth = $(this).closest('.project').find('.detail li').outerWidth() + 10;

Точно так же $(".detail") становится $(this).closest('.project').find('.detail') и т. Д.