How to make 3 identical owlcarousels?

Question

JavaScript

Hello, there was a problem with the owlcarousel.owlgraphic.com slider.
I made 3 identical sliders, but when I click on the next arrow, 3 sliders work at once instead of the 1st.
Tried to solve this problem like this

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');
      });
    });

Here is the 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>

But the slider stopped working altogether.
The original code is like this. (WORKER)

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

How to make 3 carousels, and what would work fine?

Answer 1

Because this always refers to .owl-carousel, of which there are several.
Remove this dregs with triggers, and customize the buttons through css, these are the .owl-prev and .owl-next classes, and use the standard call. Why complicate the elementary?