Lazy Load issue

Question

I have below code for jQuery owl carousel slider.

jQuery('#testslider').owlCarousel({
                lazyLoad:true,
                loop: true,
                nav:true,
                dots:false,
                margin:0,
                autoplay:true,
                autoplayTimeout:6000,
                autoplayHoverPause:true,
               responsiveClass:true,
                responsive:{
                    0:{
                        items:1,
                        nav:true
                    },
                    768:{
                        items:3,
                        nav:true
                    },
                    1250:{
                        items:5,
                        nav:true
                    },
                    1800:{
                        items:6,
                        nav:true
                    }
                }
        });

But when there are only 2 items only first items image is loaded.

Bellow is code:-

<div id="testslider">
            <?php foreach ($col as $c): 
                        <div class="item">
                                    <img class="owl-lazy" data-src="<?php echo $imgSrc; ?>" alt="<?php echo $c->getName() ?>" title="<?php echo $c->getName() ?>" />
                        </div>
                <?php endforeach; ?> 
</div>

Answer 1

Shouldn't be div "items" in

div class="item"

Or dynamic PHP load of end of this class