2 Different Owl Carousel Sliders On One Page With Different Width

I recently came across Owl Carousel. I tried using 2 sliders of different widths within a page. I am using the bootstrap grid system. I faced 2 main problems using Owl Carousel: W

Solution 1:

You need to add padding-left:0px; and padding-right:0px; with container-fluid because container-fluid has default padding-left:15px; and padding-right:15px;

Brand Slider Issue
You need to remove container class that is inside col-md-4 because container has default width:1170px;

Solution 2:

Here you go with a solution https://jsfiddle.net/dpnta0z9/

$('#main-slider').owlCarousel({ 
	loop:true, 
  nav: true, 
  autoplay:true, 
  lazyLoad:true, 
  singleItem: true, 
  slideSpeed : 300, 
  paginationSpeed : 400, 
  items : 2, 
  itemsDesktop : false, 
  itemsDesktopSmall : false, 
  itemsTablet: false, 
  itemsMobile : false, 
  dots: false, 
  responsiveClass:true, 
  navText: ["←","→"] 
});

$('#main-brand-slider').owlCarousel({ loop:true, margin:10, nav:false, autoplay:true, lazyLoad:true, items : 1, itemsDesktop : false, itemsDesktopSmall : false, itemsTablet: false, itemsMobile : false, dots: false, });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>
<div class="container-fluid">
  <div class="row">
    
    <div class="col-md-12">
      <div id="main-slider" class="owl-carousel owl-theme">
        <img  class="item" src="http://via.placeholder.com/350x150" alt="" />
        <img  class="item" src="http://via.placeholder.com/350x150" alt="" />
        <img  class="item" src="http://via.placeholder.com/350x150" alt="" />
        <img  class="item" src="http://via.placeholder.com/350x150" alt="" />
        <img  class="item" src="http://via.placeholder.com/350x150" alt="" />
        <img  class="item" src="http://via.placeholder.com/350x150" alt="" />
      </div>
      
    </div>
    
    <div class="col-md-4">
      <div class="section-text text-center">
        <h3>Brands</h3>
        <div id="main-brand-slider" class="owl-carousel owl-theme">
          <img class="img-responsive" src="http://via.placeholder.com/350x150" alt="" />
          <img class="img-responsive" src="http://via.placeholder.com/350x150g" alt="" />
          <img class="img-responsive" src="http://via.placeholder.com/350x150" alt="" />
          <img class="img-responsive" src="http://via.placeholder.com/350x150" alt="" />
          <img class="img-responsive" src="http://via.placeholder.com/350x150" alt="" />
        </div>
      </div>
    </div>
    
  </div>

</div>

Hope this will help you.