Несколько каруселей на странице

[webiex]

Здравствуйте, встала проблема на странице присутствует несколько каруселей и работают криво при нажати на кнопку вперед или назад срабатывают все карусели подскажете как побороть чтобы блок карусели работал отдельно и при нажатии сопутствующей кнопки срабатывала только та карусель на которую нажали а не все сразу

Код html

<div class="carousel1">
<div class="carousel-button-left"><a href="javascript:void(0);"> </a></div>
<div class="carousel-button-right"><a href="javascript:void(0);"> </a></div>
<div class="shadow-block" style="padding-left:0px;">
<div class="t"><div class="b"><div class="m"><div class="m">
<div class="t"><div class="t"><div class="b"><div class="b">
<div class="carousel-wrapper">
<div class="carousel-items">
<div class="carousel-block">
<img src="images/1.jpg" alt="" />
</div>
<div class="carousel-block">
<img src="images/2.jpg" alt="" />
</div>
<div class="carousel-block">
<img src="images/3.jpg" alt="" />
</div>
<div class="carousel-block">
<img src="images/4.jpg" alt="" />
</div>
<div class="carousel-block">
<img src="images/5.jpg" alt="" />
</div>
<div class="carousel-block">
<img src="images/6.jpg" alt="" />
</div>
<div class="carousel-block">
<img src="images/7.jpg" alt="" />
</div>
<div class="carousel-block">
<img src="images/8.jpg" alt="" />
</div>
</div>
</div>
</div></div>
</div></div></div>
</div></div></div>
</div>
</div>
 
 
 <div class="carousel2">
<div class="carousel-button-left"><a href="javascript:void(0);"> </a></div>
<div class="carousel-button-right"><a href="javascript:void(0);"> </a></div>
<div class="shadow-block" style="padding-left:0px;">
<div class="t"><div class="b"><div class="m"><div class="m">
<div class="t"><div class="t"><div class="b"><div class="b">
<div class="carousel-wrapper">
<div class="carousel-items">
<div class="carousel-block">
<img src="images/1.jpg" alt="" />
</div>
<div class="carousel-block">
<img src="images/2.jpg" alt="" />
</div>
<div class="carousel-block">
<img src="images/3.jpg" alt="" />
</div>
<div class="carousel-block">
<img src="images/4.jpg" alt="" />
</div>
<div class="carousel-block">
<img src="images/5.jpg" alt="" />
</div>
<div class="carousel-block">
<img src="images/6.jpg" alt="" />
</div>
<div class="carousel-block">
<img src="images/7.jpg" alt="" />
</div>
<div class="carousel-block">
<img src="images/8.jpg" alt="" />
</div>
</div>
</div>
</div></div>
</div></div></div>
</div></div></div>
</div>
</div>

Код js

$(".carousel-button-right").live('click',function(){
    right_carusel();
    });
    $(".carousel-button-left").live('click',function(){
    left_carusel();
    });
    function left_carusel(){
    var block_width = $('.carousel-block').width() + 20;
    $(".carousel-items .carousel-block").eq(-1).clone().prependTo(".carousel-items");
    $(".carousel-items").css({"left":"-"+block_width+"px"});
    $(".carousel-items").animate({left: "0px"}, 200);
    $(".carousel-items .carousel-block").eq(-1).remove();
    }
    function right_carusel(){
    var block_width = $('.carousel-block').width() + 20;
    $(".carousel-items").animate({left: "-"+ block_width +"px"}, 200);
    setTimeout(function () {
    $(".carousel-items .carousel-block").eq(0).clone().appendTo(".carousel-items");
    $(".carousel-items .carousel-block").eq(0).remove();
    $(".carousel-items").css({"left":"0px"});
    }, 300);
    }

Заранее все благодарен за любой ответ

[mta88]

конечно срабатывают обе карусели, ведь функции "left_carusel" и "right_carusel" не различают их

для начала я бы просто передал внутрь этих функций ссылку на корень нужной карусели а внутри находил бы подходящих потомков с помощью метода "children"

$(".carousel-button-left").live('click',function(){
    left_carusel($(this).parent());
});

function left_carusel(core){
    var block_width = $('.carousel-block').width() + 20;
    core.children(".carousel-items .carousel-block").eq(-1).clone().prependTo(core.children(".carousel-items"));
    core.children(".carousel-items").css({"left":"-"+block_width+"px"});
    core.children(".carousel-items").animate({left: "0px"}, 200);
    core.children(".carousel-items .carousel-block").eq(-1).remove();
}

ну и так далее

[webiex]

про бывал не получилось карусель перестала работать

для начала я бы просто передал внутрь этих функций ссылку на корень нужной карусели

можете поподробней или на моем примере показать

[mta88]

я бы посмотрел, но так лениво развертывать полную карусель у себя, тем более у меня нет css. не самому же его придумывать

дайте ссылку со страницей на ваш домен, архив с исходниками или разверните на http://jsfiddle.net

[Костин Юра]

Совсем недавно писал подобную штуку..

На мой взгляд, если мы пишем свой велосипед (я, к сожалению, их большой любитель), то нам нужно:
1. написать две функции: а) листание по кнопке влево; б) листание по кнопке вправо.
2. Вёрстка одной карусели должна выглядеть примерно так:
<div class='carusel_container'>
<div class='carousel_slides_box'>
<div class='carousel_slide active'>
//Содержимое слайда
</div>
<div class='carousel_slide'>
//Содержимое слайда
</div>
<div class='carousel_slide'>
//Содержимое слайда
</div>
</div>
<div class='carousel_nav'>
<span class='prev_slide_button'>Left</span>
<span class='next_slide_button'>Right</span>
</div>
</div>
3. Пишем обработчики для двух селекторов:
$('.prev_slide_button').click(function(){
//Вызов функции мотающей слайд назад
})
$('.next_slide_button').click(function(){
//Вызов функции мотающей слайд вперёд
})

А чтобы работало конкретно для одной карусели, нам нужно просто взять $(this) при клике и передать его в соответствующую функцию, а там получить главного родителя нашей карусели, то есть carusel_container, ну а дальше выполнять необходимые манипуляции со слайдами.
Например, так:
$('.prev_slide_button').click(function(){
show_prev_slide($this);
})

Надеюсь, что поможет.

Не ругайте, если что, первый раз на форуме пишу.