Owl Carousel not displaying when only one image

Question

I am using owl carousel and have the following code

// Home Slider    
    $("#home-slider").owlCarousel({
        loop: true,
        items: 1,
        dots: false,
        nav: true,
        autoplayTimeout: 4500,
        smartSpeed: 2000,
        autoHeight: false,
        touchDrag: true,
        mouseDrag: true,
        margin: 0,
        autoplay: true,
        slideSpeed: 600,
        navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>', '<i class="fa fa-angle-right" aria-hidden="true"></i>'],

It seems to work ok until i only have one slide in the carousel. Reading around e.g. owl carousel 2 not work with loop and 1 items (Bug Fixed Now) it is suggested to used the following on the loop option

loop: ($(".owl-carousel .owl-item").length >= 1) ? true : false;

However, when this code is run this always evaluates to false and therefore although it shows one image it breaks the loop when there is more than one. With my limited JQuery knowledge i have put some logging into the console and what i think is happening is that the loop: ($(".owl-carousel .owl-item").length >= 1) ? true : false; code is being evaluated before the DOM has loaded and cant find the classes that owl is adding. When i check in developer tools (when the DOM has loaded) i see the results i expect... ($(".owl-carousel .owl-item").length >= 1) evaluates to True

That analysis may be wrong but has anyone got any suggestions on how i can get this to work please?

Thanks Paul

Answer 1

You need to set loop:false to work with single image.

$('.quickview-slider-active').owlCarousel({ items:1, loop:false });

Answer 2

You need to set singleItem to true to make it work.