owl 轮播中项目的框阴影被切断

Question

我的 owl 轮播中的每个元素都有一个框阴影。问题是最外层的元素由于 owl-carousel 使用的 overflow: hidden 而切断了它们的 Box 阴影。我该如何解决这个问题？

Answer 1

回答我自己的问题。解决方法是设置 overflow: visible on the outer stage。隐藏所有 none 个不透明度为 0 的活动元素，然后为了平滑过渡不透明度。

.owl-stage-outer { 
overflow: visible;
}

 .owl-item {
   opacity: 0;
   transition: opacity 500ms;
}
.owl-item.active {
  opacity: 1;
}

.

Answer 2

或者您可以尝试将保证金添加到 class:

.owl-stage{
    margin: 30px;}

Answer 3

这个问题的答案有点晚了，但对于仍然想知道的人：

假设这是一个包含多个项目的旋转木马，为 owl 阶段包装器添加一些边距：

.owl-stage{
  margin: 24px;
  overflow: visible;
}

然后仅将框阴影应用到活动项目，并带有更改效果的过渡：

.owl-item {
   box-shadow: 0;
   transition: 1s all;
   webkit-transition: 1s all;
}
.active {
   box-shadow: 0 0 14px 0 rgba(74,74,74,0.20);
}

在我的例子中，我有一个包含三个项目的旋转木马，所以当框阴影应用于 owl 项目时，它很乱并且看起来被切断了，上面的方法纠正了这个问题。

Answer 4

我所做的是将 stagePadding: 30 添加到 carousel intilization 选项。如本 Link.

中所述

我只是简单地在旋转木马阶段添加边距并在旋转木马项目上添加阴影：

    .owl-stage {
        margin: 25px 0px;
        overflow: visible;
    }

    .owl-item.active {
        -webkit-box-shadow: 0px 0px 15px 0px rgba(107, 107, 107, 1);
        -moz-box-shadow: 0px 0px 15px 0px rgba(107, 107, 107, 1);
        box-shadow: 0px 0px 15px 0px rgba(107, 107, 107, 1);
    }

这适用于所有细框阴影项目。

希望这对您有所帮助。 :)

Answer 5

在我的例子中，这解决了问题：

css

   .owl-item {
        margin-bottom: 130px ;
    }
    .owl-item:first-child {
        padding-left: 10px;
    }
    .owl-item:last-child {
        padding-right: 10px;
    }

js

$(document).ready(function () {
    var owl = $('.owl-carousel');
    owl.owlCarousel({
        margin: 30            
    });

Answer 6

   $('.blog-wrap').owlCarousel({
    items: 2,
    loop:true,
    margin: 0,
    autoplay: false,
    nav: true,
    navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"]
});

.owl-item{
  padding: 25px;
}

添加列表项Div将包含方框阴影 示例：

.single-entry { box-shadow: 11px 11px 35px rgba(71, 71, 71, 0.3) }

Answer 7

This was layout of my OwlSlider

我做了什么来给一个盒子阴影，我给了我的 'Item (default owl class) class' 相同的边距，就像我想要的阴影模糊一样，并根据你的设计从 owl 插件中删除了边距。

在我的设计中，我希望项目之间有 30 像素的间距。所以我在 owl 插件中将边距设置为 0，因为我在 style.css 中为项目 class 提供了 15px 的边距，所以我得到了 30px 的边距。

solution css code for layout

Answer 8

我认为这是更好的解决方案

.owl-stage-outer { margin: -15px; padding: 15px; }

owl 轮播中项目的框阴影被切断

Box shadow on items in owl carousel being cut off

css

owl-carousel

owl-carousel-2