我在猫头鹰旋转木马的每一个元素上都有一个盒子的阴影。问题是最外面的元素由于溢出而被切断了它们的Box阴影:猫头鹰旋转木马所使用的隐藏。我该怎么办?
cngwdvgl1#
回答我自己的问题。解决方法是设置溢出:在外面的舞台上。用不透明度0隐藏所有非活动元素,然后为了平滑过渡不透明度。
.owl-stage-outer { overflow: visible; } .owl-item { opacity: 0; transition: opacity 500ms; } .owl-item.active { opacity: 1; }
.
oprakyz72#
或者你可以尝试在类中添加margin:
.owl-stage{ margin: 30px;}
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); }
在我的例子中,我有一个三个项目的旋转木马,所以当盒子阴影应用于猫头鹰项目时,它很混乱,看起来被切断了,上面的方法纠正了这一点。
i7uq4tfw4#
This was layout of my OwlSlider我做了什么给予一个盒子阴影,我给了我的“项目(默认猫头鹰类)类”相同的利润率,因为我想阴影模糊,并根据您的设计从猫头鹰插件删除利润率。在我的设计中,我想要30px的项目之间的差距。所以我在owl插件中将margin设置为0,因为我在style.css中为item类提供了15px的margin,所以我得到了30px的margin。solution css code for layout
fdx2calv5#
我认为这是更好的解决办法
.owl-stage-outer { margin: -15px; padding: 15px; }
lfapxunr6#
我所做的是将stagePadding: 30添加到carousel inutilization选项中。如本Link中所述。有了这个,我只是简单地在carousel stage和carousel items上添加margin:
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); }
这适用于所有项目的一个罚款盒阴影。希望这能帮上忙。:)
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 });
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)}
ckx4rj1h9#
这是我的肮脏之路
css .section__inner { margin-left: -12px; } .section__inner .owl-stage-outer { overflow: hidden; margin-right: -12px; padding-left: 12px; padding-top: 12px; }
现在你有12px(取决于你)的空间永远卡。调整其中的框阴影。
9条答案
按热度按时间cngwdvgl1#
回答我自己的问题。解决方法是设置溢出:在外面的舞台上。用不透明度0隐藏所有非活动元素,然后为了平滑过渡不透明度。
.
oprakyz72#
或者你可以尝试在类中添加margin:
h7appiyu3#
关于这个问题的答案有点晚了,但对于任何仍然想知道的人来说:
假设这是一个包含多个项目的carousel,在owl stage Package 器中添加一些空白:
然后仅将框阴影应用于活动项,并在更改时使用过渡效果:
在我的例子中,我有一个三个项目的旋转木马,所以当盒子阴影应用于猫头鹰项目时,它很混乱,看起来被切断了,上面的方法纠正了这一点。
i7uq4tfw4#
This was layout of my OwlSlider
我做了什么给予一个盒子阴影,我给了我的“项目(默认猫头鹰类)类”相同的利润率,因为我想阴影模糊,并根据您的设计从猫头鹰插件删除利润率。
在我的设计中,我想要30px的项目之间的差距。所以我在owl插件中将margin设置为0,因为我在style.css中为item类提供了15px的margin,所以我得到了30px的margin。
solution css code for layout
fdx2calv5#
我认为这是更好的解决办法
lfapxunr6#
我所做的是将
stagePadding: 30
添加到carousel inutilization选项中。如本Link中所述。有了这个,我只是简单地在carousel stage和carousel items上添加margin:
这适用于所有项目的一个罚款盒阴影。
希望这能帮上忙。:)
jtw3ybtb7#
在我的情况下,这解决了问题:
CSS
js
qij5mzcb8#
添加列表项Div会包含框影示例:
.single-entry { box-shadow:11px 11px 35px rgba(71,71,71,0.3)}
ckx4rj1h9#
这是我的肮脏之路
现在你有12px(取决于你)的空间永远卡。调整其中的框阴影。