我正在使用 Owlcarousel 2 在多个 div 上滑动,问题是在每个“滑动页面”内部都有一些元素定位为绝对(相对不工作),并且它们在动画时不可见,它们只是“blick- in" 动画结束时。
这就是我的 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>
这是我的 JS 文件
$(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
});
});
我该怎么做才能使所有元素即使在滑入时也可见(当它们滑出时它可以工作)。它正在使用 Owlcarousel 1。