default

by levchenko_d

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="https://beat.today/stylesheets/style.css">
<div class="owl-carousel owl-theme">
  <div class="item"> Your Content </div>
  <div class="item"> Your Content </div>
  <div class="item"> Your Content </div>
  <div class="item"> Your Content </div>
  <div class="item"> Your Content </div>
  <div class="item"> Your Content </div>
</div>

CSS

/* .owl-carousel .owl-item {
  min-height: 200px;
  width: 100%;
  border: solid 1px silver;
} */
.owl-carousel .owl-stage {
  max-width: none;
}


.owl-carousel .item {
  height: 10rem;
  background: #4DC7A0;
  padding: 1rem;
  max-width: initial !Imporatnt;
  word-break: initial !Imporatnt;
}

JavaScript

//https://cdnjs.com/libraries/OwlCarousel2
//https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html

$(document).ready(function() {
  $('.owl-carousel').owlCarousel({
  	margin:10,
    items: 1
  });
});