2 одинаковых слайда на одной странице
 

Есть такая простенькая карусель, но проблема в том, что мне нужно сделать несколько вызовов этой карусели на странице и понятное дело, когда я нажимаю на кнопку прокрутки - крутятся все карусели...Подскажите как сделать, что бы крутилась только та, которую я выбрал, я видел подобные решения с помощью функции this - но мои знания скрипта не позволяют мне решить мою проблему...

$(document).ready(function(){

$(".b-carousel-button-right").click(function(){ // при клике на правую кнопку запускаем следующую функцию:
var $self = $(this);
$(".h-carousel-items").animate({left: "-155px"}, 200); // производим анимацию: блок с набором картинок уедет влево на 222 пикселя (это ширина одного прокручиваемого элемента) за 200 милисекунд.
setTimeout(function () { // устанавливаем задержку времени перед выполнением следующих функций. Задержка нужна, т.к. эти ффункции должны запуститься только после завершения анимации.
$(".h-carousel-items .b-carousel-block").eq(0).clone().appendTo(".h-carousel-items"); // выбираем первый элемент, создаём его копию и помещаем в конец карусели
$(".h-carousel-items .b-carousel-block").eq(0).remove(); // удаляем первый элемент карусели
$(".h-carousel-items").css({"left":"0px"}); // возвращаем исходное смещение набора набора элементов карусели
}, 300);
});

$(".b-carousel-button-left").click(function(){ // при клике на левую кнопку выполняем следующую функцию:
var $self = $(this);
$(".h-carousel-items .b-carousel-block").eq(-1).clone().prependTo(".h-carousel-items"); // выбираем последний элемент набора, создаём его копию и помещаем в начало набора
$(".h-carousel-items").css({"left":"-155px"}); // устанавливаем смещение набора -222px
$(".h-carousel-items").animate({left: "0px"}, 200); // за 200 милисекунд набор элементов плавно переместится в исходную нулевую точку
$(".h-carousel-items .b-carousel-block").eq(-1).remove(); // выбираем последний элемент карусели и удаляем его
});

});

Если хочешь именно решения скинь верстку карусели. Теория такова this - указывает на конкретный элемент т.е. после клика по кнопке тебе нужно обращаться к слайдеру через this. верстка примерно такая:

<div class="main_slider">
  <div class="slider">
    <div class="slide">Слайд 1</div>
    <div class="slide">Слайд 2</div>
 </div>
  <div class="buttons">
     <div class="button'>Кнопка</div>
  </div>
</div>

То чтобы обратиться именно к этому слайдеру пользуемся тем что они лежат в общем диве main_slider

$(".button").click(function(){
  $(this).parents(".main_slider").find(".slider"); //- Выбрали только нужный слайдер
});

Здравствуйте. У меня такая же проблема, никак не догадаюсь как правильно реализовать. Нажимаю на кнопку пролистываются оба слайда. Подскажите решение, пожалуйста что бы я всегда мог пользоваться:

<div class="carousel"> 

            <div class="carousel-wrapper"> 
               <div class="carousel-items"> 
               
                  <div class="carousel-block">
                        <img src="img/example/31.jpg" usemap="#yachtamap" alt="" />
                        <map name="yachtamap">
                        <area class="carousel-button-left" href="javascript:void(0);" coords="0,155,35,190" shape="rect" alt="кнопка влево">
                        <area class="carousel-button-right" href="javascript:void(0)" coords="238,155,275,188" shape="rect" alt="кнопка вправо">
                        </map>
                 </div>
                  
                  <div class="carousel-block">
                        <img src="img/example/32.jpg" usemap="#yachtamap" alt="" />
                  </div>
                  
               </div>
            </div>

 

            <div class="carousel-wrapper"> 
               <div class="carousel-items"> 
               
                  <div class="carousel-block">
                        <img src="img/example/31.jpg" usemap="#yachtamap" alt="" />
                        <map name="yachtamap">
                        <area class="carousel-button-left" href="javascript:void();" coords="0,155,35,190" shape="rect" alt="кнопка влево">
                        <area class="carousel-button-right" href="javascript:void()" coords="238,155,275,188" shape="rect" alt="кнопка вправо">
                        </map>
                 </div>
                  
                  <div class="carousel-block">
                        <img src="img/example/32.jpg" usemap="#yachtamap" alt="" />
                  </div>
                  
               </div>
            </div>
          </div>

Скрипт:

$(".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);
}

CSS: