I want to create a custom layout/slide using Owl Carousel, but I’m not sure how to accomplish this.

Here’s the slider I’m trying to achieve:slider i’m trying to achieve
And this is the slide I’ve managed so far: slide i’ve got so far

As you can see, there are some problems. The pictures are overlapping, and I can’t seem to add a margin between them.

Html :

<div class="section-padding">
    <div class="screenshot_slider owl-carousel owl-theme">
        <div class="item">
            <img src="SomeImage.jpg" alt="">
        </div>
        <div class="item">
            <img src="SomeImage.jpg" alt="">
        </div>
        <div class="item">
            <img src="SomeImage.jpg" alt="">
        </div>
        <div class="item">
            <img src="SomeImage.jpg" alt="">
        </div>
        <div class="item">
            <img src="SomeImage.jpg" alt="">
        </div>
        <div class="item">
            <img src="SomeImage.jpg" alt="">
        </div>
        <div class="item">
            <img src="SomeImage.jpg" alt="">
        </div>
    </div>
</div>

css code:

.section-padding {
  padding: 80px 0;
}

.owl-item .item {
  transform: translate3d(0, 0, 0); /* DO NOT REMEMBER WHERE TU PUT THIS, SEARCH FOR 3D ACCELERATION */
  // transition: all .25s ease-in-out;
  margin: 50px 0; /* OVERWRITE PLUGIN MARGIN */
}

.screenshot_slider .owl-item .item img {
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
  transition: 0.3s;
  transform: scale(0.8);
}

// .screenshot_slider .owl-item.center{
//   margin-left: 90px;
//   margin-right: 90px;
// }

.screenshot_slider .owl-item.center .item img {
  transform: scale(1.3);
}

/* Adjacent siblings to the center item */
.screenshot_slider .owl-item:has(+ .owl-item.active.center) .item img, /* Previous sibling */
.screenshot_slider .owl-item.active.center + .owl-item .item img {
  /* Next sibling */
  transform: scale(1.1);
}

.screenshot_slider .owl-nav {
  text-align: center;
  // margin: 40px 0;
}

.screenshot_slider .owl-item:last-child { /* Remove margin from last item */
  margin-right: 0; 
}

.screenshot_slider .owl-nav button {
  font-size: 24px !important;
  margin: 10px;
  color: #033aff !important;
}

js: added stagePadding variable so images on the edge(left and right) and half visible only.otherwise it’s fully visible

$('.screenshot_slider').owlCarousel({
        center: true,
        loop:true,
        margin:10,
        dots: false,
        stagePadding: 200,
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 3
            },
            1200: {
                items: 3
            }
        }
    });