中注释类
设置一个测试页面来尝试一下owl.carousel.2.0.0-beta.2.4，它在IE中工作得很好，但在Chrome (Win10)中，当你点击和拖动时，它会出现图像消失的问题。我看不出有什么特定的方法能让它们消失。当你停止拖拽时，它们又会弹出来。
在两个不同的Win10系统上有此问题。在我的装有Chrome浏览器的HTC手机上，这种情况要小得多。
demo在我测试的系统上没有这个问题;它们拖起来很流畅，但我相信它们只是没有图像的文本。
我设置错误了吗?它是否使用了一些在Chrome中不能很好地工作的回落?
http://www.crystalvalleycomputers.com/dev/atlasnew/owltest.php<html>
<head>
<link rel="stylesheet" href="owl-carousel/assets/owl.carousel.css">
<!-- <link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css"> -->
<!-- jQuery 1.7+ -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<!-- Include js plugin -->
<script src="owl-carousel/owl.carousel.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel({
nav:true,
center:true,
autoplay:true,
autoplayTimeout:3000,
margin:20,
loop:true,
items:6
});
});
</script>
<div style="width:1200px;border:2px solid red;">
<div id="owl-example" class="owl-carousel">
<div><img src="images/Services/Tech_Manage.png" alt="Technology Management"></div>
<div><a href="index.php"><img src="images/Services/POS.png" alt="Point of Sale Systems"><br>is a link</a></div>
<div><img src="images/Services/Phone.png" alt="Commercial Phone Systems"></div>
<div><img src="images/Services/Web.png" alt="Web Design"></div>
<div><img src="images/Services/CVC.png" alt="Crystal Valley Computers"></div>
<div><img src="images/Services/Video.png" alt="Video Surveillance"></div>
</div>
</div>
<script>
$(document).ready(function(){
$(".owl-carousel2").owlCarousel({
rtl:true,
autoplay:true,
autoplayTimeout:3000,
margin:40,
loop:true,
items:1
});
});
</script>
<div style="width:50%;border:2px solid green;">
<div id="owl-example2" class="owl-carousel2">
<div><img src="images/Services/Tech_Manage.png" alt="Technology Management"></div>
<div><a href="index.php"><img src="images/Services/POS.png" alt="Point of Sale Systems" style="width:100px;height:100px;"><br>different size</a></div>
<div><img src="images/Services/Phone.png" alt="Commercial Phone Systems"></div>
<div><img src="images/Services/Web.png" alt="Web Design"></div>
<div><img src="images/Services/CVC.png" alt="Crystal Valley Computers"></div>
<div><img src="images/Services/Video.png" alt="Video Surveillance"></div>
</div>
</div>
</body>
</html>
Ashish Mehta的评论打动了我。
那么，解决方案是在文件owl。carousel。min。css
-webkit-transform-style:preserve-3d的属性CC_1在我的例子中，在我滚动页面后，图像变得可见。因此，我写了这个解决方案，显然解决了我的问题。
$carousel.owlCarousel({
dots: true,
items: 2,
onTranslated: scrollFix
});
function scrollFix(){
$(window).scroll();
}
这里，onTranslated是一个猫头鹰回调，它是在旋转木马被滚动/拖动后触发的。
在回调中，我调用一个简单的函数scrollFix，然后触发窗口scroll事件，从而使图像可见。
拖拽猫头鹰旋转木马时隐藏图像的解决方案。注释类
中的属性 /*-webkit-backface-visibility: hidden;*/
在文件owl.carousel.css中
.owl-carousel .owl-item{
position: relative;
min-height: 1px;
float: left;
/*-webkit-backface-visibility: hidden;*/
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}