Question

我需要一个圆形图像的旋转木马。当没有与Owl-Carousel＆amp; amp;集成时，带边框半径和溢出隐藏的Div工作正常。我想在Owl-Carousel里面。任何帮助将不胜感激。

$(document).ready(function(){
    $(".testo").owlCarousel({
        items:1
    });
});

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    background-color: #444;
}
.wrp {
    width: 600px; 
    height: 200px; 
    position: absolute;         
    top: 50%; 
    margin-top: -100px; 
    left: 50%; 
    margin-left: -300px; 
    background-color: #5a5a5a; 
    box-shadow: 0px 0px 4px rgba(0,0,0,0.2); 
}
.testo {
	margin: 10px 0px;
}

.img-wrap {
    width: 180px; 
    overflow: hidden; 
    margin: 0px auto; 
    height: 180px; 
    border-radius: 90px;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>My Test Document</title>
	
	<link href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="wrp">
        <div class="testo">
            <div class="item">
                <div class="img-wrap">
                    <img src="http://placehold.it/400x350&text=1st+img" alt="">
                </div>
            </div>

            <div class="item">
                <div class="img-wrap">
                    <img src="http://placehold.it/400x350&text=1st+img" alt="">
                </div>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>
</body>
</html>

Answer 1

我遇到了同样的问题。我将引用：＆＃34;如果你试图隐藏绝对定位元素，请确保这些绝对定位元素的容器相对定位。＆＃34; 如果要使用溢出隐藏，则父div必须相对定位。

添加职位：亲属

.img-wrap {
  width: 180px; 
  overflow: hidden; 
  margin: 0px auto; 
  height: 180px; 
  border-radius: 90px;
  position: relative;
}

在Owl-carousel中，父div中带有border-radius和overflow hidden的图像不起作用

1 个答案: