Как сделать 3 одинаковых карусели owlcarousel?

Question

[qwex]

Здравствуйте, возникла проблема с слайдером owlcarousel.owlgraphic.com .
Сделал 3 одинаковых слайдера, но когда нажимаю на стрелку дальше, то срабатывают сразу 3 слайдера вместо 1-го.
Пробывал решить эту проблему так

var projecten = $(".owl-carousel");
    projecten.each(function() {

      var $this = $(this);

      $this.owlCarousel({
         loop: true,
      lazyLoad: true,
      margin: 50,
      nav: false,
      autoplay: true,
      autoplayHoverPause: true,
      responsive: {
        0: {
          items: 1
        },
        600: {
          items: 3
        },
        1000: {
          items: 5
        }
      }
        )
      };

      $this.parent().find(".owl-container .glyphicon-chevron-left").click(function() {
        $this.trigger('owl.prev');
      });

      $this.parent().find(".owl-container .glyphicon-chevron-right").click(function() {
        $this.trigger('owl.next');
      });
    });

Вот html

<div class="weap">
    <div class="arrow-left">
      <img src="assets/img/left-arow.png" alt="">
    </div>
    <div id="weapons-car">
      <div class="owl-carousel">
        <div class="item">
          <img class="img-ab-w owl-lazy" src="assets/img/img.png" alt="">
        </div>
        <div class="item">
          <img class="img-ab-w owl-lazy" src="assets/img/img.png" alt="">
        </div>
        <div class="item">
          <img class="img-ab-w owl-lazy" src="assets/img/img.png" alt="">
        </div>
        <div class="item">
          <img class="img-ab-w owl-lazy" src="assets/img/img.png" alt="">
        </div>
        <div class="item">
          <img class="img-ab-w owl-lazy" src="assets/img/img.png" alt="">
        </div>
        <div class="item">
          <img class="img-ab-w owl-lazy" src="assets/img/img.png" alt="">
        </div>
      </div>
    </div>
    <div class="arrow-right">
      <img src="assets/img/right-arrow.png" alt="">
    </div>
  </div>

Но слайдер перестал вообще работать.
Изначально код такой. (РАБОЧИЙ)

$('.owl-carousel').owlCarousel({
      loop: true,
      lazyLoad: true,
      margin: 50,
      nav: false,
      autoplay: true,
      autoplayHoverPause: true,
      responsive: {
        0: {
          items: 1
        },
        600: {
          items: 3
        },
        1000: {
          items: 5
        }
      }
    })
    var owl = $('.owl-carousel');
    owl.owlCarousel();
    // Go to the next item
    $('.arrow-right').click(function() {
        owl.trigger('next.owl.carousel');
      })
      // Go to the previous item
    $('.arrow-left').click(function() {
      // With optional speed parameter
      // Parameters has to be in square bracket '[]'
      owl.trigger('prev.owl.carousel', [300]);
    })

Как сделать 3 карусели, и что-бы нормально работали?

Answer 1

[Serj-One]

Потому что this всегда ссылается на .owl-carousel, коих несколько.
Убери эту муть с триггерами, и кастомизируй кнопки через css, это классы .owl-prev и .owl-next, и используй стандартный вызов. Зачем усложнять элементарное?