css 盒阴影的项目在猫头鹰旋转木马被切断

2hh7jdfx  于 2023-07-01  发布在  其他
关注(0)|答案(9)|浏览(125)

我在猫头鹰旋转木马的每一个元素上都有一个盒子的阴影。问题是最外面的元素由于溢出而被切断了它们的Box阴影:猫头鹰旋转木马所使用的隐藏。我该怎么办?

cngwdvgl

cngwdvgl1#

回答我自己的问题。解决方法是设置溢出:在外面的舞台上。用不透明度0隐藏所有非活动元素,然后为了平滑过渡不透明度。

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

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

.

oprakyz7

oprakyz72#

或者你可以尝试在类中添加margin:

.owl-stage{
    margin: 30px;}
h7appiyu

h7appiyu3#

关于这个问题的答案有点晚了,但对于任何仍然想知道的人来说:
假设这是一个包含多个项目的carousel,在owl stage Package 器中添加一些空白:

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

在我的例子中,我有一个三个项目的旋转木马,所以当盒子阴影应用于猫头鹰项目时,它很混乱,看起来被切断了,上面的方法纠正了这一点。

i7uq4tfw

i7uq4tfw4#

This was layout of my OwlSlider
我做了什么给予一个盒子阴影,我给了我的“项目(默认猫头鹰类)类”相同的利润率,因为我想阴影模糊,并根据您的设计从猫头鹰插件删除利润率。
在我的设计中,我想要30px的项目之间的差距。所以我在owl插件中将margin设置为0,因为我在style.css中为item类提供了15px的margin,所以我得到了30px的margin。
solution css code for layout

fdx2calv

fdx2calv5#

我认为这是更好的解决办法

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

lfapxunr6#

我所做的是将stagePadding: 30添加到carousel inutilization选项中。如本Link中所述。
有了这个,我只是简单地在carousel stage和carousel items上添加margin:

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

这适用于所有项目的一个罚款盒阴影。
希望这能帮上忙。:)

jtw3ybtb

jtw3ybtb7#

在我的情况下,这解决了问题:
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            
    });
qij5mzcb

qij5mzcb8#

$('.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)}

ckx4rj1h

ckx4rj1h9#

这是我的肮脏之路

css
.section__inner {
  margin-left: -12px;
}

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

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

相关问题