JSFiddle - React, Tailwind, and code Playground

by Raloynner

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
<div class="wrapper">
  <div class="container">
  <h1>title</h1>
</div>


<div class="container">
  <!-- Set up your HTML -->
<div class="owl-carousel">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>
</div>
</div>

CSS

.wrapper{
  overflow: hidden;
}
.container  {
  width: 640px;
  margin: 0 auto;
  background-color: #e3e3e3;
}
.owl-carousel .owl-item{
  background-color: red;
  width: 400px !important;
}
.owl-carousel .owl-stage-outer{
  overflow: visible;
}

JavaScript

$(document).ready(function(){
  $(".owl-carousel").owlCarousel({
  margin:10,
  autoWidth: true
  });
});