自定义猫头鹰轮播布局

Question

我想使用 Owl Carousel 创建自定义布局/幻灯片，但我不确定如何完成此操作。

这是我想要实现的滑块：我想要实现的滑块 这是我迄今为止制作的幻灯片：到目前为止我制作的幻灯片

如您所见，存在一些问题。图片重叠，我似乎无法在它们之间添加边距。

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代码：

.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：添加了 stagePadding 变量，以便图像在边缘（左和右）和一半可见。否则它是完全可见的

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

Answer 1

几乎找到了我想要的例子

使用上面的代码作为参考并进行编辑以适合我的布局： CSS：

.carousel_2 .owl-item:has(+ .owl-item.active.center) {
    /* Previous sibling */
    height: 550px;
    align-self: flex-start;
    margin-top: 0;
  }
  .carousel_2 .owl-item.active.center + .owl-item {
    /* Next sibling */
    height: 550px;
    align-self: flex-start;
    margin-top: 0;
  }

  .carousel_2 .active.center {
    height: 850px;
    align-self: center;
    margin-top: 0;
  }

  .owl-carousel .owl-item {
    height: 450px;
    align-self: flex-start;
    margin-top: 50px;
  }

html（刀片）

<div class="owl-carousel owl-theme carousel_2">
        @foreach(range(1, 5) as $_)
        <span>
            <img class="item" data-dots="1" src="https://rb.gy/9hjl1d" alt="">
            <div class="text-center">
                <h3>TITLE HERE</h3>
                <div class="primary-text fw-bold">850 $</div>
            </div>
        </span>
        @endforeach
    </div>

添加了简单的循环来减少我必须编写的 html JS：

$('.carousel_2').owlCarousel({
    loop: false,
    margin: 40,
    center: true,
    dots: false,
    startPosition: 1,
    responsive: {
      0: {
        items: 1,
      },
      600: {
        items: 1,
      },
      1000: {
        items: 2,
      },
      1200: {
        items: 4,
      },
    },
  });