Javascript Owlcarousel 2-translate3d()时元素不可见

Javascript Owlcarousel 2-translate3d()时元素不可见,javascript,css,owl-carousel,translate3d,owl-carousel-2,Javascript,Css,Owl Carousel,Translate3d,Owl Carousel 2,我使用OWLCarousel2在多个div上滑动,问题是在每个“滑动页面”中都有一些元素定位为绝对(相对也不起作用),它们在动画制作时不可见,动画完成时它们只是“快速进入” 这就是我的html的样子 <div id="owl-example" class="owl-carousel width-height-100"> <div class="advert-bg lazyOwl owl-lazy" data-src="ad_preview_new.png">

我使用OWLCarousel2在多个div上滑动,问题是在每个“滑动页面”中都有一些元素定位为绝对(相对也不起作用),它们在动画制作时不可见,动画完成时它们只是“快速进入”

这就是我的html的样子

<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>
我能做些什么使所有元素在滑入(滑出时)时都可见。
它与Owlcarousel 1一起工作。

它似乎发生在Chrome上,而不是Firefox上。 可能的解决方案是修改css:

.owl-carousel .owl-item { -webkit-backface-visibility: visible; }

希望有帮助。

也有同样的问题,“相对”内容没有显示,最后我发现这与css的“过渡”效果有关。因此,将其添加到父元素fixed mine:


转换:所有0.3s轻松

更换

transform: 'translate3d(' + coordinate + 'px,0px,0px)'
transform: 'translate3d("+b+"px,0px,0px)'

transform: 'translate3d(' + (coordinate-1) + 'px,0px,0px)'
transform: 'translate3d("+(b-1)+"px,0px,0px)'
并且,在使用owl.carousel.min.js文件的情况下

更换

transform: 'translate3d(' + coordinate + 'px,0px,0px)'
transform: 'translate3d("+b+"px,0px,0px)'

transform: 'translate3d(' + (coordinate-1) + 'px,0px,0px)'
transform: 'translate3d("+(b-1)+"px,0px,0px)'
希望这有帮助