Owlcarousel 2 - элементы не видны во время translate3d()

Я использую Owlcarousel 2 для скольжения по нескольким элементам div, проблема в том, что внутри каждой "скользящей страницы" есть некоторые элементы, позиционируемые как абсолютные (относительные не работают), и они не видны во время анимации, они просто "blick- в "когда анимация закончена.

Вот как выглядит мой 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.

Источник

2 ответа

В файле owl.carousel.js

ЗАМЕНИТЬ

transform: 'translate3d(' + coordinate + '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)'

Надеюсь это поможет!

Источник

Если бы та же самая проблема, "относительный" контент не показывался, и, наконец, я обнаружил, что это связано с эффектом "перехода" css. Так что добавление этого в родительский элемент исправил мой:

transition: all 0.3s ease;

Источник

Кажется, это происходит в Chrome, а не в Firefox. Возможное решение состоит в том, чтобы изменить CSS:

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

Надеюсь, поможет.

Источник
Другие вопросы по тегам