JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.css">
<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>
JavaScript
$('#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, });