blocks|key|4332541|text|来回答我自己的问题。解决此问题的方法是在外部舞台上设置overflow:+visible。隐藏所有不透明度为0的活动元素，然后为了平滑而转换不透明度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4332542|.owl-stage-outer+{+
overflow:+visible;
}

+.owl-item+{
+++opacity:+0;
+++transition:+opacity+500ms;
}
.owl-item.active+{
++opacity:+1;
}|code-block|syntax|javascript|4332543|。|4332544|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

To answer my own question. A workaround for this would be to set overflow: visible on the outer stage. Hiding all none active elements with opacity 0 and then for smoothness transition the opacity.

<pre><code>.owl-stage-outer { 
overflow: visible;
}

 .owl-item {
 opacity: 0;
 transition: opacity 500ms;
}
.owl-item.active {
 opacity: 1;
}
</code></pre>

.

blocks|key|4332212|text|或者您可以尝试将边距添加到类中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4332213|.owl-stage{
++++margin:+30px;}|code-block|syntax|javascript|4332214|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Or you can try add margin to class:

<pre><code>.owl-stage{
 margin: 30px;}
</code></pre>

blocks|key|4332636|text|这个问题的答案有点晚了，但对于任何仍在疑惑的人来说：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4332637|假设这是一个包含多个项目的轮播，在owl阶段包装器中添加一些空白：|4332638|.owl-stage{
++margin:+24px;
++overflow:+visible;
}|code-block|syntax|javascript|4332639|然后仅将长方体阴影应用于活动项目，并在更改时进行过渡：|4332640|.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);
}|4332641|在我的例子中，我有一个包含三个项目的旋转木马，所以当框阴影应用于owl项目时，它是凌乱的，看起来被切断了，上面的方法纠正了这一点。|4332642|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

A bit late to the answers on this but for anyone still wondering: 

Assuming this a carousel of multiple items, add some margin to the owl stage wrapper: 

<pre><code>.owl-stage{
 margin: 24px;
 overflow: visible;
}
</code></pre>

Then only apply the box shadow to the active items, with a transition for effect on change: 

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

In my case I had a carousel of three items so when the box shadow was applied to owl items it was messy and looked cut off, the method above rectifies that.

blocks|key|4332678|text|我所做的就是将stagePadding:+30添加到轮播使用选项中。如本Link所述。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4332679|这样，我只需在carousel阶段添加边距，并在carousel项上添加阴影：|4332680|++++.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);
++++}|code-block|syntax|javascript|4332681|这适用于所有项目的精细长方体阴影.|4332682|希望这能有所帮助。:)|4332683|entityMap|0|LINK|mutability|MUTABLE|url|https://owlcarousel2.github.io/OwlCarousel2/demos/stagepadding.html^0|7|G|10|4|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|16|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|17|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

What i did was adding <code>stagePadding: 30</code> to carousel intilization options.
as described in this <a href="https://owlcarousel2.github.io/OwlCarousel2/demos/stagepadding.html" rel="nofollow noreferrer">Link</a>.

with that i simply add margin to carousel stage and shadow on carousel items: 

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

This applies to all items a fine Box Shadow.

Hope this helps. :)

blocks|key|4332364|text|在我的例子中，这解决了问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4332365|css|4332366|+++.owl-item+{
++++++++margin-bottom:+130px+;
++++}
++++.owl-item:first-child+{
++++++++padding-left:+10px;
++++}
++++.owl-item:last-child+{
++++++++padding-right:+10px;
++++}|code-block|syntax|javascript|4332367|js|4332368|$(document).ready(function+()+{
++++var+owl+=+$('.owl-carousel');
++++owl.owlCarousel({
++++++++margin:+30++++++++++++
++++});|4332369|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

In my case this solve the problem:

css

<pre><code> .owl-item {
 margin-bottom: 130px ;
 }
 .owl-item:first-child {
 padding-left: 10px;
 }
 .owl-item:last-child {
 padding-right: 10px;
 }
</code></pre>

js

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

blocks|key|4332790|text|This+was+layout+of+my+OwlSlider|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4332791|我给我的'Item+(默认owl类)类‘设置了相同的边距，就像我想要阴影模糊一样，并根据你的设计从owl插件中删除了边距。|4332792|在我的设计中，我希望物品之间有30px的间距。因此，我在owl插件中将边距设置为0，因为我在style.css中为item类设置了15px的边距，因此我获得了30px的边距。|4332793|solution+css+code+for+layout|4332794|entityMap|0|LINK|mutability|MUTABLE|url|https://i.stack.imgur.com/sIwaT.png|1|https://i.stack.imgur.com/0a55H.png^0|0|V|0|0|0|0|0|S|1|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|J|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]|R|$5|M|N|O|C|$P|S]]]]

<a href="https://i.stack.imgur.com/sIwaT.png" rel="nofollow noreferrer">This was layout of my OwlSlider</a>

What i did to give a box-shadow, i gave same margin to my 'Item (default owl class) class' as much as i want shadow blur and remove the margin according to your design from owl plugin.

in my design i wanted 30px gap between items. so i set margin to 0 in owl plugin as i gave 15px margin to item class in my style.css so i got 30px margin.

<a href="https://i.stack.imgur.com/0a55H.png" rel="nofollow noreferrer">solution css code for layout</a>

I have got a box shadow on every element in my owl carousel. Problem is the outer most elements have their Box shadow cut off because of the overflow: hidden that owl-carousel utilizes. How can i get around this?

Box shadow on items in owl carousel being cut off

我在我的猫头鹰旋转木马中的每个元素上都有一个长方体阴影。问题是，由于owl-carousel使用的overflow: hidden，大多数元素的Box阴影都被切断了。我怎么才能避免这个问题呢？

问owl轮播中的项目上的方框阴影被剪切
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问owl轮播中的项目上的方框阴影被剪切EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问owl轮播中的项目上的方框阴影被剪切
EN