首页 > 解决方案 > Owl Carousel 2 - 图片背后的 Spinner Loader

问题描述

我对微调器加载器有一个奇怪的行为,它显示在图像后面,但延迟加载false在选项中声明。

$('.galleryowl').owlCarousel({
    margin: 10,
    autoWidth: true,
    dots: false,
    dotsEach: false,
    lazyLoad: false,
    loop: false
});

在此处输入图像描述

您有任何线索可能是问题所在吗?

问候

<div class="galleryowl owl-carousel owl-theme owl-loaded owl-drag">
    <div class="owl-stage-outer">
        <div class="owl-stage"
            style="transform: translate3d(-615px, 0px, 0px); transition: all 0.25s ease 0s; width: 2255px;">
            <div class="owl-item" style="width: auto; margin-right: 10px;"><img class="img-responsive"
                    src="https://66822b0c4798708fd342-4c20877d1724d8eec18944c33f4c4dbd.ssl.cf1.rackcdn.com/17727/1386208/medium/17966999.jpg"
                    style="opacity: 1;"></div>
            <div class="owl-item" style="width: auto; margin-right: 10px;"><img class="img-responsive"
                    src="https://66822b0c4798708fd342-4c20877d1724d8eec18944c33f4c4dbd.ssl.cf1.rackcdn.com/17727/1386208/medium/17967002.jpg"
                    style="opacity: 1;"></div>
            <div class="owl-item" style="width: auto; margin-right: 10px;"><img class="img-responsive"
                    src="https://66822b0c4798708fd342-4c20877d1724d8eec18944c33f4c4dbd.ssl.cf1.rackcdn.com/17727/1386208/medium/17966992.jpg"
                    style="opacity: 1;"></div>
            <div class="owl-item active" style="width: auto; margin-right: 10px;"><img class="img-responsive"
                    src="https://66822b0c4798708fd342-4c20877d1724d8eec18944c33f4c4dbd.ssl.cf1.rackcdn.com/17727/1386208/medium/17966994.jpg"
                    style="opacity: 1;"></div>
            <div class="owl-item active" style="width: auto; margin-right: 10px;"><img class="img-responsive"
                    src="https://66822b0c4798708fd342-4c20877d1724d8eec18944c33f4c4dbd.ssl.cf1.rackcdn.com/17727/1386208/medium/17966997.jpg"
                    style="opacity: 1;"></div>
            <div class="owl-item active" style="width: auto; margin-right: 10px;"><img class="img-responsive"
                    src="https://66822b0c4798708fd342-4c20877d1724d8eec18944c33f4c4dbd.ssl.cf1.rackcdn.com/17727/1386208/medium/17966995.jpg"
                    style="opacity: 1;"></div>
            <div class="owl-item active" style="width: auto; margin-right: 10px;"><img class="img-responsive"
                    src="https://66822b0c4798708fd342-4c20877d1724d8eec18944c33f4c4dbd.ssl.cf1.rackcdn.com/17727/1386208/medium/17967011.jpg"
                    style="opacity: 1;"></div>
            <div class="owl-item" style="width: auto; margin-right: 10px;"><img class="img-responsive"
                    src="https://66822b0c4798708fd342-4c20877d1724d8eec18944c33f4c4dbd.ssl.cf1.rackcdn.com/17727/1386208/medium/17966998.jpg"
                    style="opacity: 1;"></div>
            <div class="owl-item" style="width: auto; margin-right: 10px;"><img class="img-responsive"
                    src="https://66822b0c4798708fd342-4c20877d1724d8eec18944c33f4c4dbd.ssl.cf1.rackcdn.com/17727/1386208/medium/17966990.jpg"
                    style="opacity: 1;"></div>
            <div class="owl-item" style="width: auto; margin-right: 10px;"><img class="img-responsive"
                    src="https://66822b0c4798708fd342-4c20877d1724d8eec18944c33f4c4dbd.ssl.cf1.rackcdn.com/17727/1386208/medium/17966984.jpg"
                    style="opacity: 1;"></div>
            <div class="owl-item" style="width: auto; margin-right: 10px;"><img class="img-responsive"
                    src="https://66822b0c4798708fd342-4c20877d1724d8eec18944c33f4c4dbd.ssl.cf1.rackcdn.com/17727/1386208/medium/17966991.jpg"
                    style="opacity: 1;"></div>
        </div>
    </div>
    <div class="owl-nav disabled"><button type="button" role="presentation" class="owl-prev"><span
                aria-label="Previous">‹&lt;/span></button><button type="button" role="presentation" class="owl-next"><span
                aria-label="Next">›&lt;/span></button></div>
    <div class="owl-dots disabled"></div>
</div>

标签: owl-carouselowl-carousel-2

解决方案


这是我的自定义 css owl 文件中的一个问题。我删除了错误加载的背景微调器图像。


推荐阅读