owl-carousel 2 chrome 拖动时空白图片答案

【问题标题】：owl-carousel 2 chrome blanks pictures when draggingowl-carousel 2 chrome 拖动时空白图片
【发布时间】：2015-09-14 22:02:14
【问题描述】：

设置一个测试页面来试用 owl.carousel.2.0.0-beta.2.4，它在 IE 中运行良好，但在 Chrome (Win10) 中，当您单击并拖动时，图像会消失。我不知道有什么特定的方法可以让它们消失。当您停止拖动时，它们会弹回。

在两个不同的 Win10 系统上都有这个问题。在我的带有 Chrome 的 HTC 手机上，它的作用要小得多。

演示在我测试的系统上没有这个问题；它们拖得很顺畅，但我相信它们只是没有图像的文本。

我是否设置错误？是否使用了一些在 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>

【问题讨论】：

请评论-webkit-transform-style：preserve-3d； .owl-carousel 中的 css 属性 owl.carousel.css 中第 131 和 172 行的 .owl-item img 选择器

标签： owl-carousel owl-carousel-2

【解决方案1】：

Ashish Mehta 的评论对我有用。

因此，解决方案是在文件 owl.carousel.min.css

上的 .owl-carousel .owl-item img 类中注释属性 -webkit-transform-style:preserve-3d

【讨论】：

你刚刚让我的星期五很棒。我可以带着成就感进入周末，并且图像在滚动/拖动时立即可见

【解决方案2】：

在我的情况下，图像在我滚动页面后变得可见。因此，我编写了这个解决方法，显然解决了我的问题。

$carousel.owlCarousel({
  dots: true,
  items: 2,
  onTranslated: scrollFix
});

function scrollFix(){
  $(window).scroll();
}

这里onTranslated是一个owl Callback，在轮播被滚动/拖动后触发。

在回调中，我调用一个简单的函数scrollFix，然后触发窗口scroll事件，从而使图像可见。

希望这会有所帮助。

【讨论】：

【解决方案3】：

拖动猫头鹰轮播时隐藏图像的解决方案。注释类中的属性

 /*-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;

}

【讨论】：