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

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

Hope this will help you.