猫头鹰旋转木马,显示孩子绝对div,超过父母溢出隐藏div
我正在使用猫头鹰旋转木马2,我正面临以下问题。
我有一个名为owl-stage-outer
父div
,它有overflow:hidden
根据轮播的要求overflow:hidden
。
我有另一个孩子div
名称: ribbon
(显示’New Arrival’和’Big Sale’)这是position: absolute
现在我面临的问题,在旋转木马的第一项,function区因为overflow: hidden
参考图像
我正在工作的链接
我试过这个链接提供的解决方案,但它只适用于直接的孩子。
提前致谢。
你可以添加这个margin-left: 25px;
其作品。
编辑:
其作品
添加你的这个container
:
您的owl-stage-outer
:
这是一个你可以尝试的修复(有点脏,但它有效):
首先你删除overflow: hidden
的.owl-carousel .owl-stage-outer
。 它会在100%的页面宽度上显示所有滑块,是的。
但是你设定position: relative;
.owl-carousel .owl-stage-outer
而不是position: static;
。
然后你添加一个:before
就像这样隐藏左边的部分:
.owl-carousel .owl-stage-outer:before { content: ""; background: #fff; position: absolute; width: 100%; height: 700px; left: -100%; margin-left: -20px; top: 0; z-index: 10; }
当然你必须做同样的事情:after
隐藏正确的内容。
尝试此解决方案
.owl-carousel .owl-stage-outer { margin: -25px; padding: 25px; }