JSFiddle - React, Tailwind, and code Playground

by Alex Bashkin

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      &nbsp;
    </div>
  </div>
</div>
   
<div class="carousel owl-carousel owl-theme">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
  <div class="item">Item 8</div>
  <div class="item">Item 9</div>
  <div class="item">Item 10</div>
  <div class="item">Item 11</div>
  <div class="item">Item 12</div>
  <div class="item">Item 13</div>
  <div class="item">Item 14</div>
  <div class="item">Item 15</div>
</div>

CSS

.container {
  background: #000;
  height: 40px;
}

.owl-carousel .owl-nav {
  text-align: center;
}

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel button.owl-dot {
  font-size: 40px;
}

.owl-item {
  text-align: center;
}

.owl-item:nth-child(odd) {
  background: #aaf;
}

JavaScript

let containerWidth = $('.container').width()
let offsetLeft = ($(document).width() - containerWidth) / 2
let width = containerWidth / 4

$('.carousel').owlCarousel({
	stagePadding: offsetLeft - 15,
  loop:true,
  margin: 0,
  nav:true,
  items: 4,
  width: width
})