Question

当OwlCarousel加载到页面上时，我遇到两个问题。

我得到的图像不会缩小到正确的范围在旋转木马将所有东西踢到位之前的尺寸。
有时在页面加载时，旋转木马选项似乎没有因为我每张幻灯片获得了几张图片，而不仅仅是一张图片意图。

因为旋转木马中的图像都是不同的大小，但我希望它们居中并且导航按钮保持在同一个位置，我的主要OwlCarousel项目是内部动态生成图像的div（也使用LazySizes JS来延迟）

我的HTML是：

<div class="owl-carousel owl-theme">
    <?php foreach ($page->pictures()->yaml() as $image): ?>
    <?php if($img = $page->image($image)): ?>
    <div class="owl-holder">
        <img    data-sizes="auto"
                data-srcset="<?= $img->resize(null, 560, 80)->url() ?> 1x,
                <?= $img->url() ?> 2x" alt="<? $page->title()->html()?>"
                data-src="<?= $img->url() ?>"
                src="<?= $img->url() ?>"
                class="lazyload">
    </div>
    <?php endif ?>
    <?php endforeach ?>
</div>

CSS是：

.owl-carousel {
    margin-top:0.75rem;
}

.owl-holder{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 35rem;
    width: 100%;
}

.owl-carousel .owl-holder img {
    max-height: 100%;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
}

和javascript：

$(".owl-carousel").owlCarousel({
      items: 1,
      margin: 10,
      center: true,
      loop: true,
      nav: true,
  });

此功能还可以打破较小设备上的旋转木马，使图像呈现在彼此之上：

// Create and play resize function
$(function() {
    var owl = $('.owl-carousel'),
        owlOptions = {
            items: 1,
            margin: 10,
            center: true,
            loop: true,
            nav: true,
        };

    if ( $(window).width() > 897 ) {
        var owlActive = owl.owlCarousel(owlOptions);
    } else {
        owl.addClass('off');
    }

    // Fire on page resize
    $(window).resize(function() {
        if ( $(window).width() > 897 ) {
            if ( $('.owl-carousel').hasClass('off') ) {
                var owlActive = owl.owlCarousel(owlOptions);
                owl.removeClass('off');
            }
        } else {
            if ( !$('.owl-carousel').hasClass('off') ) {
                owl.addClass('off').trigger('destroy.owl.carousel');
                owl.find('.owl-stage-outer').children(':eq(0)').unwrap();
            }
        }
    });

    // Fire on page load
    if ( $(window).width() < 897 ) {
        owl.addClass('off').trigger('destroy.owl.carousel');
        owl.find('.owl-stage-outer').children(':eq(0)').unwrap();
    }
});

任何人都可以帮我确定造成这个故障的原因吗？

该页面可在tessherb.wwwss46.a2hosted.com查看更多详情

猫头鹰旋转木马装载问题（未缩放图像和不正确的项目编号）

0 个答案: