猫头鹰旋转木马中物品上的框阴影被切断

Question

我的猫头鹰旋转木马的每个元素上都有一个盒子阴影。问题是最外层的元素由于溢出而被切断了盒子阴影：猫头鹰旋转木马利用的隐藏。我该如何解决这个问题？

Answer 1

回答我自己的问题。解决此问题的方法是设置溢出：在外部阶段可见。隐藏所有无活动元素，不透明度为 0，然后为了平滑度而过渡不透明度。

.owl-stage-outer { 
overflow: visible;
}
 .owl-item {
   opacity: 0;
   transition: opacity 500ms;
}
.owl-item.active {
  opacity: 1;
}

.

Answer 2

或者

您可以尝试为类添加边距：

.owl-stage{
    margin: 30px;}

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

这是我

的OwlSlider的布局

我

做了什么来给一个盒子阴影，我为我的"项目(默认猫头鹰类(类"提供了相同的边距，就像我想要阴影模糊并根据你的设计从猫头鹰插件中删除边距一样多。

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

布局的解决方案 CSS 代码

Answer 5

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

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

Answer 6

我所做的是将stagePadding: 30添加到轮播灌输选项中。如本链接中所述。

有了这个，我只需在轮播项目上添加边距和轮播项目的阴影：

    .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 7

就我而言，这解决了问题：

.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 8

   $('.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 将包含框阴影例：

.单条目 { 框阴影： 11px 11px 35px RGBA(71， 71， 71， 0.3( }

Answer 9

这是我肮脏的方式

css
.section__inner {
  margin-left: -12px;
}
.section__inner .owl-stage-outer {
  overflow: hidden;
  margin-right: -12px;
  padding-left: 12px;
  padding-top: 12px;
}

现在你有12px(取决于你(的空间永远卡。调整其中的框阴影。