1

I have 4 blocks. And I want the default 2 to be centered, and 2 more along the edges. In the documentation I did not find anything that could help me solve this problem. Is there any way to solve it?

$('.wrapper-blocks').owlCarousel({
      //center: true,
      items: 4,
      autoWidth: true,
      nav: false,
      rtl:true,
      loop: true,
      margin: 25
  });
.wrapper-blocks {
  width: 1024px;
  display: flex;
  justify-content: space-between;
  align-items: center;
 }
 
.wrapper-blocks .block {
    width: 286px;
    display: inline-block;
    border-radius: 4px;
    float: left;
    background-color: red;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.24), 0 1px 4px 0 rgba(0, 0, 0, 0.12);
    text-align: center;
    padding: 25px 0;
    text-decoration: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>
<div class="wrapper-blocks owl-carousel">
  <div class="block">
      <span>Some text</span>
  </div>
  <div class="block">
      <span>Some text</span>
  </div>
  <div class="block">
      <span>Some text</span>
  </div>
  <div class="block">
      <span>Some text</span>
  </div>
</div>
Ivan Kucher
  • 115
  • 1
  • 5

0 Answers0