Question

我的猫头鹰旋转木马上的每个元素都有一个盒子阴影。问题是最外面的元素因为溢出而将它们的Box阴影切断：隐藏的猫头鹰轮播使用。我怎么能绕过这个？

Answer 1

或者您可以尝试为课程添加保证金：

.owl-stage{
    margin: 30px;}

Answer 2

回答我自己的问题。解决方法是在外层设置overflow：visible。隐藏所有非活动元素的不透明度为0，然后平滑过渡不透明度。

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

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

Answer 3

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

假设这是一个由多个项目组成的轮播，请为猫头鹰阶段包装器添加一些边距：

.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);
}

在我的情况下，我有三个项目的轮播，因此，当将框阴影应用于猫头鹰项目时，它会变得凌乱并且看上去被切掉，上述方法可以纠正这一问题。

Answer 4

我所做的就是在转盘转播选项中添加stagePadding: 30。如本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);
    }

这适用于所有优良的Box Shadow。

希望这会有所帮助。：）

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将包含框阴影 例如：

。单次输入{ box-shadow：11px 11px 35px rgba（71，71，71，0.3）}

Answer 7

This was layout of my OwlSlider

我给框阴影做的事情是，我给我的“ Item（默认猫头鹰类）类”留了相同的余量，只要我想要阴影模糊并根据猫头鹰插件中的设计删除余量。

在我的设计中，我希望项目之间的间距为30px。所以我在owl插件中将margin设置为0，因为我给了style.css中的item类15px的保证金，所以我有了30px的保证金。

solution css code for layout

在被切除的猫头鹰转盘的项目的箱子阴影

7 个答案: