Как разместить 2 owl карусели на одной странице?

Вот мой сайт
Я подключил owl карусель
Проблема в том, что навигация (стрелочки < >) работают неправильно. Они прокручивают по очереди в одну сторону сначала одну карусель а в другую сторону другую карусель.
Как исправить? Я так понимаю нужно использовать некий DOM элемент. Но не могу так как не шарю в этом ;)
Вот сам код обеих каруселей:

$(document).ready(function(){
  $(".slide-one").owlCarousel({
        loop:false,
    	margin:30,
    	nav:true,
    	navText : ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
		navContainer: '.main-content .custom-nav',
    	dots:false,
    	responsive:{
        0:{
          items:1
        },
        300:{
            items:1
        },
        540:{
            items:2
        },
        960:{
            items:3
        },
        1140:{
          items:5
        }
    	}
    });

    $(".slide-two").owlCarousel({
        loop:false,
    	margin:30,
    	nav:true,
    	navText : ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
		navContainer: '.main-content .custom-nav',
    	dots:false,
    	responsive:{
        0:{
          items:1
        },
        300:{
            items:1
        },
        540:{
            items:2
        },
        960:{
            items:3
        },
        1140:{
          items:5
        }
    	}
    });
});