> For the complete documentation index, see [llms.txt](https://javascriptuse.gitbook.io/javascript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://javascriptuse.gitbook.io/javascript/show-half-of-the-other-item-on-owl-carousel-vinmec.com-stagepadding-ok.md).

# Show half of the other item on Owl Carousel vinmec.com stagePadding (ok)

![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYjAG13rAPdbArSfRyB%2F-MYnUMo1Q3ojTYfR0zp4%2F-MYnV72o68rYRyWAHo07%2FScreenshot_2.jpg?alt=media\&token=d480f602-cf00-4406-b08a-4efa0255e019)

```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- Latest compiled and minified CSS & JS -->
  <script src="https://code.jquery.com/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/owl.carousel.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/assets/owl.carousel.min.css">
  <style type="text/css">
  .carousel-wrap {
    margin: 90px auto;
    width: 500px;
    position: relative;
    border: 1px solid red;
  }
  /* fix blank or flashing items on carousel */
  .owl-carousel .item {
    position: relative;
    z-index: 100;
    -webkit-backface-visibility: hidden;
  }
  /* end fix */
  .owl-nav>div {
    margin-top: -26px;
    position: absolute;
    top: 50%;
    color: #cdcbcd;
  }
  .owl-nav i {
    font-size: 52px;
  }
  .owl-nav .owl-prev {
    left: -30px;
  }
  .owl-nav .owl-next {
    right: -30px;
  }
  </style>
</head>
<body>
  <div class="carousel-wrap">
    <div class="owl-carousel">
      <div class="item"><img src="http://placehold.it/150x150"></div>
      <div class="item"><img src="http://placehold.it/150x150"></div>
      <div class="item"><img src="http://placehold.it/150x150"></div>
      <div class="item"><img src="http://placehold.it/150x150"></div>
      <div class="item"><img src="http://placehold.it/150x150"></div>
      <div class="item"><img src="http://placehold.it/150x150"></div>
      <div class="item"><img src="http://placehold.it/150x150"></div>
      <div class="item"><img src="http://placehold.it/150x150"></div>
      <div class="item"><img src="http://placehold.it/150x150"></div>
      <div class="item"><img src="http://placehold.it/150x150"></div>
      <div class="item"><img src="http://placehold.it/150x150"></div>
      <div class="item"><img src="http://placehold.it/150x150"></div>
    </div>
  </div>
  <script type="text/javascript">
  $('.owl-carousel').owlCarousel({
    loop: true,
    margin: 10,
    nav: true,
    navText: [
      "<i class='fa fa-caret-left'></i>",
      "<i class='fa fa-caret-right'></i>"
    ],
    center: true,
    items: 1,
    autoplayHoverPause: true,
    stagePadding: 150, 
  })
  </script>
</body>
</html>
```
