How to properly connect two owl carousels with navigation?

Question

JavaScript

Connected two Owl carousels
Like this:

$(document).ready(function() {
$('#owl-films, #owl-serials').owlCarousel({
    loop:false,
    margin:10,
    nav: false,
    dots:false,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }

})
var owl=$("#owl-films");
  owl.owlCarousel();
  $("#films-next").click(function(){
    owl.trigger("next.owl.carousel");
  });
  $("#films-prev").click(function(){
    owl.trigger("prev.owl.carousel");
});
var owl=$("#owl-serials");
  owl.owlCarousel();
  $("#serials-next").click(function(){
    owl.trigger("next.owl.carousel");
  });
  $("#serials-prev").click(function(){
    owl.trigger("prev.owl.carousel");
});

The problem is that the navigation buttons do not work, or rather they are initialized only for one of the carousels.
One navigation (buttons with class next, prev) scroll both carousels at once.
How to write navigation for each carousel correctly?

Answer 1

something like this https://codepen.io/tyzberd/pen/GbJmpX?editors=0010

Answer 2

as an option, set different classes and connect each separately - more code, of course, but it will work 100%
For example (put your own classes and settings)

<script>
      $(function() {
        // Owl Carousel
        
        $('.owl-carousel-1').owlCarousel({
          items: 4,
          margin: 20,
          loop: false,
          nav: false,
          dots: false,
          autoplay: false,
          responsiveClass:true,
          responsive:{
            0:{
              items:1,
              nav: false,
            },
            480:{
              items:2,
              nav: false,
            },
            768:{
              items:3,
              nav: false,
            },
            1024:{
              items:4,
              nav: false,							
            }
          },
          navText: [
          "<span class='icon-slider-back'></span>",
          "<span class='icon-slider-forwards'></span>"
          ],
          beforeInit : function(elem){
            //Parameter elem pointing to $("#owl-demo")
            random(elem);
          }
          
        });
        $('.owl-carousel-2').owlCarousel({
          items: 3,
          margin: 10,
          loop: true,
          nav: true,
          dots: false,
          autoplay: false,
          responsiveClass:true,
          responsive:{
            0:{
              items:1,
              nav: false,
            },
            768:{
              items:2,
            },
            1024:{
              items:3,
            }
          },
          navText: [
          "<span class='icon-slider-back'></span>",
          "<span class='icon-slider-forwards'></span>"
          ],
          beforeInit : function(elem){
            //Parameter elem pointing to $("#owl-demo")
            random(elem);
          }
          
        });
      });	
      
    </script>

Answer 3

I recommend better use swiper