我需要一个具有圆形图像的轮播。带有边框半径和溢出隐藏的 Div 在未与 Owl-Carousel 集成时工作正常，我希望它在 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>最佳答案
我遇到了同样的问题。我会引用:“如果您试图隐藏绝对定位元素，请确保这些绝对定位元素的容器是相对定位的。” 如果要使用溢出隐藏，父div必须相对定位。
添加position:relative
.img-wrap {
width: 180px;
overflow: hidden;
margin: 0px auto;
height: 180px;
border-radius: 90px;
position: relative;
}
关于html - 在 Owl-carousel 中，隐藏了 border-radius 和 overflow 的父 div 中的图像不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30478437/