CODEWITHSUNDEEP
owl-carouselowl-carousel-2
Joe Ingold
Joe Ingold

Reputation: 41

owl-carousel 2 chrome blanks pictures when dragging

Set up a test page to try out owl.carousel.2.0.0-beta.2.4 and it works nicely in IE but in Chrome (Win10) it has issues with images disappearing when you click and drag. I can't tell that there's any specific method to which ones disappear. When you stop dragging they pop back in.

Had this issue on two different Win10 systems. It does it to a much lesser degree on my HTC phone with Chrome.

The Demos don't have this issue on the systems I tested on; they drag smoothly but I believe they are only text without images.

Did I set up something incorrectly? Is it using some fall back that doesn't work well in 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>

Upvotes: 4

Views: 3489

Answers (3)

Gibin Ealias
Gibin Ealias

Reputation: 2859

In my case, the images become visible after I scroll the page. Thus, I wrote this workaround which apparently fixed my problem.

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

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

Here, onTranslated is an owl Callback which is triggered after the carousel is scrolled/dragged.

And in the callback, I call a simple function scrollFix which then triggers the window scroll event, thus making the images visible.

Hope this helps.

Upvotes: 0

Steelcrusher
Steelcrusher

Reputation: 31

Ashish Mehta's comment did the trick for me.

So, the solution is to comment the property -webkit-transform-style:preserve-3d in the class .owl-carousel .owl-item img that's on the file owl.carousel.min.css

Upvotes: 2

harsimran
harsimran

Reputation: 1

Solution for hidden image during dragging owl carousel. Comment the property in the class

 /*-webkit-backface-visibility: hidden;*/

that's on the file 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;

}

Upvotes: -1

Related Questions