- 首页
- 前端开发
- Owlcarousel 2 - translate3d() 时元素不可见
Owlcarousel 2 - translate3d() 时元素不可见
[英] Owlcarousel 2 - elements not visible while translate3d()
本文介绍了Owlcarousel 2 - translate3d() 时元素不可见的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用 Owlcarousel 2 在多个 div 上滑动，问题是在每个滑动页面"内都有一些元素定位为绝对(相对也不起作用)，并且它们在动画时不可见，它们只是动画完成时blick-in".
这就是我的 html 的样子
<div class="advert-bg lazyOwl owl-lazy" data-src="ad_preview_new.png"><div class="col-sm-6 col-md-7 col-lg-8 col-elg-9 pull-right position-absolute-text"><div class="row"><div class="advert-text gradient-white-bg"><div class="col-sm-6 col-md-5 col-lg-4 col-elg-3 pull-right"><div class="row"><h1>Suikervrij beleg</h1><p>Suikervrij beleg op de窝，pannenkoek的beschuit?Met onze suikervrije confituuren chocopasta kan en mag het！</p>
<img src="logo.png" class="image-logo" >
<div class="advert-bg lazyOwl owl-lazy" data-src="ad_preview_new.png"><div style="margin:0 auto;padding:0;width:100px;height:100px;display:block;background:red;">fds
<div class="col-sm-6 col-md-7 col-lg-8 col-elg-9 pull-right position-absolute-text"><div class="row"><div class="advert-text gradient-white-bg"><div class="col-sm-6 col-md-5 col-lg-4 col-elg-3 pull-right"><div class="row"><h1>Suikervrij beleg</h1><p>Suikervrij beleg op de育雏，pannenkoek的beschuit?Met onze suikervrije confituuren chocopasta kan en mag het！</p>
<img src="logo.png" class="image-logo" >
<div class="advert-bg lazyOwl owl-lazy" data-src="http://localhost:8888/ad_preview_new2.png"><img src="logo2.png" class="image-logo" >
这是我的JS文件
$(document).ready(function() {$("#owl-example").owlCarousel({navigation : false,//显示下一个和上一个按钮分页:假，自动播放:真实，自动播放超时:2000，自动播放速度:2000，循环:真，滑动速度:300，分页速度:400，项目 : 1,itemsDesktop : 假,itemsDesktopSmall : false,itemsTablet: 假,itemsMobile:假，懒加载:真，懒惰内容:真});});
我该怎么做才能使所有元素在滑入时可见(当它们滑出时它起作用).它与 Owlcarousel 1 一起使用.
解决方案
在owl.carousel.js文件
替换
transform: 'translate3d(' + 坐标 + 'px,0px,0px)'
与
transform: 'translate3d(' + (coordinate-1) + 'px,0px,0px)'
而且，如果是 owl.carousel.min.js 文件
替换
transform: 'translate3d("+b+"px,0px,0px)'
与
transform: 'translate3d("+(b-1)+"px,0px,0px)'
希望这会有所帮助！
I'm using Owlcarousel 2 for sliding over multiple divs, the problem is that inside each "sliding-page" there are some elements positioned as absolute (relative not working neither), and they are not visible while animating, they just "blick-in" when the animation is finished.
This is what my html looks like
<div id="owl-example" class="owl-carousel width-height-100">
<div class="advert-bg lazyOwl owl-lazy" data-src="ad_preview_new.png">
<div class="col-sm-6 col-md-7 col-lg-8 col-elg-9 pull-right position-absolute-text">
<div class="row">
<div class="advert-text gradient-white-bg">
<div class="col-sm-6 col-md-5 col-lg-4 col-elg-3 pull-right">
<div class="row">
<h1>Suikervrij beleg</h1>
<p>
Suikervrij beleg op de
brood, beschuit of pannenkoek?
Met onze suikervrije confituur
en chocopasta kan en mag het!
</p>
</div>
</div>
</div>
</div>
</div>
<img src="logo.png" class="image-logo" >
</div>
<div class="advert-bg lazyOwl owl-lazy" data-src="ad_preview_new.png">
<div style="margin:0 auto;padding:0;width:100px;height:100px;display:block;background:red;">
fds
</div>
<div class="col-sm-6 col-md-7 col-lg-8 col-elg-9 pull-right position-absolute-text">
<div class="row">
<div class="advert-text gradient-white-bg">
<div class="col-sm-6 col-md-5 col-lg-4 col-elg-3 pull-right">
<div class="row">
<h1>Suikervrij beleg</h1>
<p>
Suikervrij beleg op de
brood, beschuit of pannenkoek?
Met onze suikervrije confituur
en chocopasta kan en mag het!
</p>
</div>
</div>
</div>
</div>
</div>
<img src="logo.png" class="image-logo" >
</div>
<div class="advert-bg lazyOwl owl-lazy" data-src="http://localhost:8888/ad_preview_new2.png">
<img src="logo2.png" class="image-logo" >
</div>
</div>
And this is my JS file
$(document).ready(function() {
$("#owl-example").owlCarousel({
navigation : false, // Show next and prev buttons
pagination: false,
autoplay: true,
autoplayTimeout: 2000,
autoplaySpeed: 2000,
loop:true,
slideSpeed : 300,
paginationSpeed : 400,
items : 1,
itemsDesktop : false,
itemsDesktopSmall : false,
itemsTablet: false,
itemsMobile : false,
lazyLoad: true,
lazyContent:true
});
});
What can I do to make all the elements visible even while they are sliding-in (when they are sliding-out it works).
It was working with Owlcarousel 1.
解决方案
In the owl.carousel.js file
REPLACE
transform: 'translate3d(' + coordinate + 'px,0px,0px)'
WITH
transform: 'translate3d(' + (coordinate-1) + 'px,0px,0px)'
And, in case of the owl.carousel.min.js file
REPLACE
transform: 'translate3d("+b+"px,0px,0px)'
WITH
transform: 'translate3d("+(b-1)+"px,0px,0px)'
Hope this helps!
这篇关于Owlcarousel 2 - translate3d() 时元素不可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
