自举轮播图片未显示 [英] Bootstrap carousel Images not showing

问题描述

我正在使用具有延迟加载功能的轮播，因此图像仅在滚动时加载， 但是问题在于，除了轮播中的图像之外，其他所有图像均未加载. 我还尝试了此解决方案.

I am using carousel with lazy loading ,so that images load only on scroll, But problem is that all images except images inside carousel are not loading. I have also tried this solution.

轮播

     <div class="owl-carousel">
         <div class="item">
             <a href="/descriptive-essay-writer"><img src="/_/img/Descriptive-Essay.jpg" class="lazy" alt="Descriptive Essay"></a>
             <a href="/descriptive-essay-writer"><h4>Descriptive Essay</h4></a>
             <p>Our experienced descriptive essay writers paint a beautiful picture through words and give you an amazing descriptive essay.</p>
         </div>
         <div class="item">
             <a href="/persuasive-essay-writer"><img src="/_/img/Persuasive-Essay.jpg" class="lazy" alt="Persuasive Essay"></a>
             <a href="/persuasive-essay-writer"><h4>Persuasive Essay</h4></a>
             <p>Our persuasive essay writers are brilliant at convincing the reader and keeping them engaged in the essay from start to finish.</p>
         </div>
         <div class="item">
             <a href="/expository-essay-writer"><img src="/_/img/Expository-Essay.jpg" class="lazy"  alt="Expository Essay"></a>
             <a href="/expository-essay-writer"><h4>Expository Essay</h4></a>
             <p>Our expository essay writing service delivers a perfect expository essay complete with definitions, facts, examples and stats.</p>
         </div>
         <div class="item">
             <a href="/narrative-essay-writer"><img src="/_/img/Narrative-Essay.jpg" class="lazy" alt="Narrative Essay"></a>
             <a href="/narrative-essay-writer"><h4>Narrative Essay</h4></a>
             <p>Our narrative essay writers are master in the art of story-telling and making your essays engaging so you can get the best grade.</p>
         </div>
     </div>

脚本

    <script>
$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    responsiveClass:true,
    autoplay:true,
    autoplayTimeout:2000,
    rewindSpeed : 1000,
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:2,
            nav:false
        },
        1000:{
            items:3,
            nav:true,
        }
    }
})
</script>

延迟加载

  <script>
$(function() {



    $('.lazy').lazy({
        beforeLoad: function(element){
            console.log('image "' +element.data('src')+ '" is about to be loaded');
        },
        afterLoad: function(element) {

            console.log('image "' +element.data('src') + '" was loaded successfully');
        },
        onError: function(element) {
            console.log('error');
        },
        onFinishedAll: function() {

            console.log('lazy instance is about to be destroyed')
        }
    });


});
</script>

请帮助我在做错事，我也尝试过更改脚本顺序但没有运气.我的网站是实时的

Please help what i am doing wrong,I have also tried changing order of script but no luck.My site is live here

推荐答案

将此添加到猫头鹰项

    .owl-item {
    display: inline-block;
     }

又一个问题: 我认为应该将div之外的内容隐藏起来

One more Issue : I assume that the content outside the div should be hidden

    .owl-carousel{
    overflow:hidden;
     }

这篇关于自举轮播图片未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！